Call a controller function from directive with parameters

angularjs, angularjs-directive, javascript

Solution

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

Problem

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); } }; }); ```

Original source