Angular自定义指令-传递对父函数的引用

Question

我将一些代码重构为一个自定义指令，该指令从父级作用域获取用户列表，并以表格格式显示它们。 应用程序用户可以选择表中的用户之一来查看详细信息。 users和setUser()函数位于父控制器中，而不是指令控制器中。 所以我将用户传递给指令，并创建对setUser()函数的引用。

app.directive('myDirective', function() {
   return {
        restrict : 'E',
        templateUrl : 'app/view.html',
        controller : 'ViewController',
        scope: {
            setUser: '&',
            users: '='
        }
   }
});

这是view.html的相关代码：

<div ng-repeat="user in users">
    <div ng-click="setUser(user)">...</div>
</div>

这就是我使用指令的方式：

<my-directive users="users" set-user='setUser()'></my-directive>

问题是，当我单击表中的用户并调用setUser函数时，传递给该函数的用户始终是未定义的。 我不确定该如何解决。

Answer 1

在指令中使用其他函数：

<div ng-repeat="user in users">
  <div ng-click="doSetUser(user)">...</div>
</div>

并在指令链接/控制器中：

$scope.doSetUser = function(user) {
  // Call the function bound to the directive with extended scope
  $scope.setUser( {user: user} );
}

这样，您传递给指令的函数将有权访问HTML中的user变量（从技术上讲，它的范围已由本地user变量扩展），因此您可以执行以下操作：

<my-directive users="users" set-user='setUser(user)'></my-directive>

Answer 2

我进行了一些更改，您可以尝试：

 app.directive('myDirective', function() { return { restrict : 'E', templateUrl : 'app/view.html', controller : 'ViewController', scope: { setUser: '=', //Changed '&' -> '=' users: '=' } } }); 

和

 <my-directive users="users" set-user="setUser"></my-directive> //Change setUser() -> setUser