निर्देश

Question

से पैरेंट कंट्रोलर विधि के लिए तर्क पास करें मैं निर्देशक से end() नियंत्रक के लिए तर्कों को कैसे पास करूं?

निर्देशक

var fileuploader = function() { 
    return { 
     restrict: 'E', 
     scope: { 
      onEnd: '&', 
     }, 
     controller: function ($scope) { 
      // When upload is done 
      $scope.onEnd(/* file */); 
     } 
    }; 
} 

नियंत्रक

module.controller('Ctrl', function ($scope) { 
    $scope.end = function (file) { 
     console.log('file', file); 
    }; 
}); 

टेम्पलेट:

<div ng-controller='Ctrl'> 
    <fileuploader on-end='end()'></fileuploader> 
</div> 

मैं भी आश्चर्य है कि अगर यह एक है चीजों को करने का ngular तरीका क्योंकि मैं इसे कहीं और इस्तेमाल नहीं देखा। शायद निम्नलिखित अधिक कोणीय है?

निर्देशक

var fileuploader = function() { 
    return { 
     restrict: 'E', 
     scope: { 
      onEnd: '=', 
     }, 
     controller: function ($scope) { 
      // When upload is done 
      $scope.file = file; 
     } 
    }; 
} 

नियंत्रक

module.controller('Ctrl', function ($scope) { 
    $scope.$watch('file', function (val) { 
     console.log('file', val); 
    }); 
}); 

खाका

<div ng-controller='Ctrl'> 
    <fileuploader on-end='file'></fileuploader> 
</div> 

यह कुछ indirec कहते हैं यद्यपि टयन हालांकि और शायद कम आगे है तो नियंत्रक विधि को बुला रहा है।

Answer 1

Aight महोदय, यहाँ एक उदाहरण है, क्षमा चाहते हैं अगर मेरी स्पष्टीकरण सुपर स्पष्ट नहीं है: http://plnkr.co/edit/3wO3So

दृश्य:

<div ng-controller='fooCtrl'> 
     <fileuploader directive-end-fn='end(directiveData)'></fileuploader> 
    </div> 

नियंत्रक & निर्देशक

app.controller('fooCtrl', function($scope) { 
    /// This end() function sits on the controller it will be passed data from the directive 
    $scope.end = function (directiveData) { 
     console.log("I'm in the controller " + directiveData); 
    }; 
}); 

app.directive('fileuploader', function(){ 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     /// I bind the end function from the controller to scope.directiveEndFn, 
     //I'll use it in the link function later 
     directiveEndFn: '&', 
    }, 
    /// I take your directive, add an input box as a model (model.input) 
    template: '<div><input type="text" ng-model="model.input"><div>{{model.input}}</div></div>', 
    /// Put your logic in the linking function, so it runs all the time.  
    link: function(scope,element){ 
     /// This could be any event, right now I'm watching the model.input for event changes. 
     //It fires a callback that allows me to do stuff when changes happen 
     scope.$watch("model.input", function(myModelValue){ 
       // I use scope.directiveEndFn with an "Object Map", 
       // I tell it to use the model.input which is now assigned to myModelValue value, 
       // It's a $watch convention you can read more about, whatever gets "Watched" is 
       // is the parameter of the callback. 
       // The object map links myModelValue to DirectiveData 
       // Look at the view, which passes this information, 
       // from the directive to the controller - directive-end-fn='end(directiveData)' 
       scope.directiveEndFn({directiveData: myModelValue}); 
     }); 
    } 
    } 
}); 

This is a really good explanation on how to do this also. There are a couple more techniques there too!

यदि आप स्कोप इंटरपोलेशन, using the &, view this समझना चाहते हैं तो भी।