i was looking for a way to know how to call function inside directive from controller. i got the snip but hence i am new in angular that is why the below code flow is not very clear. anyone mind to explain how the code is working. thanks
// Directive
<map set-fn="setDirectiveFn(theDirFn)"></map>
scope: { setFn: '&' },
link: function(scope, element, attrs) {
scope.updateMap = function() {
alert('inside updateMap()');
}
scope.setFn({theDirFn: scope.updateMap});
}
// Controller
<button ng-click="directiveFn()">call directive function</button>
function MyCtrl($scope) {
$scope.setDirectiveFn = function(directiveFn) {
$scope.directiveFn = directiveFn;
};
}
Starting with the controller, this block creates a setDirectiveFn() method on the $scope object in your controller that takes a single parameter (directiveFn) and then uses that parameter to create a directiveFn() method on the $scope object in your controller.
$scope.setDirectiveFn = function(directiveFn) {
$scope.directiveFn = directiveFn;
};
Inside the directive it is creating an updateMap() method on the scope object in the directive and then calling the setFn() method which is mapped to the $scope.setDirectiveFn() method by this line: <map set-fn="setDirectiveFn(theDirFn)"></map> in your HTML and this line: scope: { setFn: '&' } in your directive. It is passing the scope.updateMap() method which effectively sets $scope.directiveFn() in your controller equal to scope.updateMap() in your directive.
link: function(scope, element, attrs) {
scope.updateMap = function() {
alert('inside updateMap()');
}
scope.setFn({theDirFn: scope.updateMap});
}
The button is then calling $scope.directiveFn() in your controller which has been mapped to scope.updateMap() in your directive.
<button ng-click="directiveFn()">call directive function</button>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments