22

指令如何从带有一些参数的控制器调用函数？

我会将变量 myVar 赋予范围。$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>

控制器 JS：

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

指令 JS：

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

3 回答 3

20

这是其中一种工作方法：

您必须在作用域中将此属性绑定为具有函数类型的作用域模型。因此，您可以在需要其他（指令）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) '
      } 
  }; 
});

这是plunker 上的代码

来自 AngularJS：指令

= 或 =attr - 在本地范围属性和通过 attr 属性值定义的 name 的父范围属性之间建立双向绑定。如果未指定 attr 名称，则假定属性名称与本地名称相同。给定范围的widget定义：{localModel:'=myAttr'}，那么widget范围属性localModel将在父范围上反映parentModel的值。对 parentModel 的任何更改都将反映在 localModel 中，并且 localModel 中的任何更改都将反映在 parentModel 中

于 2013-04-21T20:55:55.173 回答
10

在 HTML 中

whattodo="addVal(value)"

在指令中

scope.$apply(function(s){
    s.whattodo({value : myVar});
});
于 2013-04-21T20:24:21.303 回答
4

为什么不在隔离范围内使用“&”符号？

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

在控制器中：

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

在指令中：

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}) 
      } 
  }; 
});
于 2015-10-08T10:54:18.463 回答