从带有参数的指令调用控制器函数

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

将变量myVar赋给作用域，$apply(attrs.whattodo);

HTML :

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 :

控制器JS:

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

Directive JS :

指令JS:

angular.module('component', []).directive('customattr', function () {
  return {
      restrict: 'A',
      link: function (scope, element, attrs) {
          var myVar = 5;
          scope.$apply(attrs.whattodo);
      } 
  }; 
});

3 个解决方案

#1

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

您必须在作用域中将该属性绑定为具有函数类型的作用域模型。所以你可以在其他(指令)sope中执行这个

HTML

HTML

<body ng-controller="MainCtrl">
  Value: {{value}}!

  <button customattr whattodo="addValue">Add</button>
</body>

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

从AngularJS:指令

= 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

=或=attr -在本地范围属性和通过attr属性值定义的名称的父范围属性之间建立双向绑定。如果没有指定attr名称，则假定属性名称与本地名称相同。给定作用域的小部件定义:{localModel:'=myAttr'}，那么小部件作用域属性localModel将反映父作用域上parentModel的值。对parentModel的任何更改将反映在localModel中，而localModel中的任何更改将反映在parentModel中

#2

in html

在html中

whattodo="addVal(value)"

in directive

在指令

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

#3

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

#1