Menu
How can a directive call a function from a controller with some parameters ?
I would to give the variable myVar to the scope.$apply(attrs.whattodo);
HTML :
<div ng-app="component"> <div ng-controller="ctrl"> <span ng-repeat="i in myarray"> <span customattr whattodo="addVal">{{i}}</span> </span> </div> Controller JS :
function ctrl($scope) { $scope.myarray = [1]; $scope.addVal = function (value) { $scope.myarray.push(value); } } Directive JS :
angular.module('component', []).directive('customattr', function () { return { restrict: 'A', link: function (scope, element, attrs) { var myVar = 5; scope.$apply(attrs.whattodo); } }; }); 
458
You just create a myVar variable in your controller and pass it to the directive using my-var attribute. Since you are using two way binding, any changes made to myVar by the directive are available in your controller.
AngularJS ng-controller Directive The ng-controller directive adds a controller to your application. In the controller you can write code, and make functions and variables, which will be parts of an object, available inside the current HTML element. In AngularJS this object is called a scope.
Answer:The link option is just a shortcut to setting up a post-link function. controller: The directive controller can be passed to another directive linking/compiling phase. It can be injected into other directices as a mean to use in inter-directive communication.
Here is one of the working methods:
You have to bind this attribute in scope as a scope model with function type. So you can execute this when you need in other (directive) sope
HTML
<body ng-controller="MainCtrl"> Value: {{value}}! <button customattr whattodo="addValue">Add</button> </body> JS
angular.module('component', []) .controller('MainCtrl', function($scope) { $scope.value = 1; $scope.addValue = function(val){ alert(val); $scope.value = val; } }); .directive('customattr', function () { return { restrict: 'A', scope: { whattodo: "=" // or ' someOtherScopeName: "=whattodo" ' }, link: function (scope, element, attrs) { var myVar = 5; scope.whattodo(myVar); // or ' scope.someOtherScopeName(myVar) ' } }; }); Here is code on plunker
from AngularJS: Directives
= or =attr - set up bi-directional binding between a local scope property and the parent scope property of name defined via the value of the attr attribute. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given and widget definition of scope: { localModel:'=myAttr' }, then widget scope property localModel will reflect the value of parentModel on the parent scope. Any changes to parentModel will be reflected in localModel and any changes in localModel will reflect in parentModel
170
in html
whattodo="addVal(value)" in directive
scope.$apply(function(s){ s.whattodo({value : myVar}); }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
