CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
JohnCastle
JohnCastle

Reputation: 569

Call a controller function from directive with parameters

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

Upvotes: 22

Views: 17309

Answers (3)

Julia Usanova
Julia Usanova

Reputation: 447

Why don't you use the "&" sign in isolated scope?

<body ng-controller="MainCtrl">
  Value: {{value}}!
  <button customattr add-val="addValue(value)">Add</button>
</body>

In controller:

   function ctrl($scope) {
      $scope.myarray = [1];
      $scope.addValue = function (value) {
          $scope.myarray.push(value);
      }
   }

And in directive: 

angular.module('component', []).directive('customattr', function () {
  return {
      restrict: 'A',
      scope: {
          addVal: "&"
      },
      controller: function ($scope) {
          var myVar = 5;
             // To execute addVal in controller with 'value' param
          $scope.addVal({value: value}) 
      } 
  }; 
});

Upvotes: 4

Mak
Mak

Reputation: 20453

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

Upvotes: 20

Ketan
Ketan

Reputation: 5891

in html

whattodo="addVal(value)"

in directive

scope.$apply(function(s){
    s.whattodo({value : myVar});
});

Upvotes: 10

Related Questions