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

Question

我正在将一些代码重构为自定义指令，该指令从父范围获取用户列表并以表格格式显示。应用程序用户可以select table 中的其中一位用户查看详细信息。 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>

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

Answer 1

在您的指令中使用不同的函数：

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

并在指令中 link/controller:

$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

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

Angular custom directive - pass reference to parent function

angularjs

directive