Question

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

我想将变量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>

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

Answer 1

以下是其中一种工作方法：

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

这是 code on plunker

  来自 AngularJS: Directives
的

=或= attr - 在本地范围属性和通过值定义的名称的父范围属性之间设置双向绑定   oftr属性。如果未指定attr名称，则为该属性   假定name与本地名称相同。给定范围的小部件定义：{   localModel：'= myAttr'}，然后是widget范围属性localModel   反映父范围内parentModel的值。任何改变   parentModel将反映在localModel和任何更改中   localModel将反映在parentModel
中

Answer 2

in html

whattodo="addVal(value)"

指令

中的

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

Answer 3

为什么不使用“＆amp;”签到孤立的范围？

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

使用参数从指令调用控制器函数

3 个答案: