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