将函数从父控制器传递给带参数的指令

Question

我想问一下在AngularJS中将函数从控制器传递给指令的方法。

父控制器中有2个foo，它们的工作方式几乎相同（在实际代码中有一些不同）所以我决定将它们放在父控制器中并将变量/函数传递给指令。

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

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

欢迎提出任何建议和解决方案：）

查看和控制器

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

指令

我-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',
    }
  }
)

我-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

回答此问题的关键是如何映射属性。如果你想传递参考，你必须使用＆＃34; =＆＃34;在指令范围内使用char，并将函数传递给指令而不调用它。如果您使用＆＃39;＆amp;＆＃39; char，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>

Answer 2

请查看此信息以获取更多信息。它对您未来的发展很有用。

AngularDirectives