Question

33

Call a controller function from directive with parameters

rated 0 times [ 40] [ 7] / answers: 1 / hits: 17356 / 11 Years ago, sun, april 21, 2013, 12:00:00

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

      } 

  }; 

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

declanm

Add To Favorites

Follow

Total Points: 614

Total Questions: 105

Total Answers: 97

Location: Dominica

Member since Sat, Nov 5, 2022

2 Years ago

answered 11 Years ago reed · Accepted Answer

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