javascript - 将函数从父 Controller 传递到带参数的指令

Question

我想问一下AngularJS中如何将函数从 Controller 传递到指令。

父 Controller 中有 2 个 foo ，它们的工作原理几乎相同(在实际代码中略有不同)，因此我决定将它们放入父 Controller 中并将变量/函数传递给指令。

没有参数的函数没有问题，但像 $scope.func1 = function(index) {//bla bla } 这样的函数无法传递给指令。

你能帮我解决这个问题吗？

欢迎任何建议和解决方案:)

View 和 Controller

view.html

<my-directive lists="foo1" 
              item-click="showFoo1List()" 
              show="showFoo1" 
              func="func1"> <!-- I want to pass this one -->
</my-directive>
<my-directive lists="foo2" 
              item-click="showFoo2List()" 
              show="showFoo2" 
              func="func2">  <!-- this one -->
</my-directive>

controller.js

angular.module('app')
.controller('MyCtrl', function($scope){
  // Foo1
  $scope.foo1 = [ { name: 'A'}, { name: 'B'} ]
  $scope.showFoo1 = false
  $scope.showFoo1List = function() { 
    $scope.showFoo1 = true 
  }
  $scope.func1 = function(index) { 
    console.log($scope.foo1[index]) 
    $scope.showFoo1 = false
  }
  
  // Foo2
  $scope.foo2 = [ { name: 'Y'}, { name: 'Z'} ]
  $scope.showFoo2 = false
  $scope.showFoo2List = function() { 
    $scope.showFoo2 = true 
  }
  $scope.func2 = function(index) { 
    console.log($scope.foo2[index]) 
    $scope.showFoo2 = false
  }
})

指令

my-directive.js

angular.module('app')
.directive('myDirective',
  function(){
    return {
      restrict: 'AE',
      scope: {
        lists: '=',
        showFoo: '&',
        show: '=',
        func: '&' // pass the function(param) to here
      },
      templateUrl: 'my-directive.html',
    }
  }
)

my-directive.html

<button ng-click="showFoo()">
  click me
</button>
<div ng-repeat="item in lists" 
     ng-show="show"
     ng-click="func($index)"> <!-- here it refers to func1(index) or func2(index) in parent controller -->
  {{item.name}}
</div>

感谢一百万!

Answer 1

回答这个问题的关键是如何映射属性。如果你想传递引用，你必须在指令范围内使用“=”字符，并将函数传递给指令而不调用它。如果您使用“&”字符，Angular 会创建一个函数，该函数包装您作为属性传递的表达式。

试试这个:

angular.module('app')
.directive('myDirective',
  function(){
    return {
      restrict: 'AE',
      scope: {
        lists: '=',
        showFoo: '=',
        show: '=',
        func: '=' // pass the function(param) to here
      },
      templateUrl: 'my-directive.html',
    }
  }
)

<my-directive lists="foo2" 
          item-click="showFoo2List()" 
          show-foo="showFoo2" 
          func="func2">  <!-- this one -->
</my-directive>