AngularJS：如何在指令中將函數動態添加到附加的html元素

Question

我創建了一個指令來處理我的Web應用程序中的所有鏈接。 我已經成功生成了不同的鏈接對象，具體取決於登錄用戶所扮演的角色。 以下代碼有效，但當我嘗試向“ htmlElement”中的ng-click添加功能時除外。

      $scope.test = test;
      function test() {
                console.log("test")
            }

       var htmlElement = "<li ng-click=\"test()"\"><a href=\"" +
                link.href + "\" target=\"" +
                link.target + "\">" +
                link.title + "</a></li>";
       element.append(htmlElement);
...
       $compile(element)($scope);
       element.append(element);

當點擊生成的元素時，ng-click和test（）不會觸發。 我究竟做錯了什么？

Answer 1

嘗試將test（）函數放在指令的作用域上，如下所示：

       $scope.test = function() {
                console.log("test")
            }

       var htmlElement = "<li ng-click=\"test()"\"><a href=\"" +
                link.href + "\" target=\"" +
                link.target + "\">" +
                link.title + "</a></li>";
       element.append(htmlElement);

...

   $compile(element)($scope);
   element.append(element);

test（）是指令的鏈接函數中的私有函數。 ng-click無法訪問它，因為它不在$ scope上。

希望這可以幫助。

Answer 2

據我了解，您正在嘗試顯示一個按鈕，以確定用戶是否具有查看或使用該按鈕所需的角色。 這不是您嘗試做的好方法。

方法如下：在存儲用戶角色的范圍內添加一個范圍，然后在控制器內部對其進行評估（如果用戶可以看到該按鈕）。 然后在html內使用ng-show隱藏/查看按鈕。

示例：（在html內）

<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="userRole"></div>

代替div使用您的按鈕或任何您想...

（在您的控制器或腳本內部）

<script>
if (user.Role == "Admin")
{ 
   // this will show the button on the view
   $scope.userRole = true 
}
else
{
   // this will hide the button from the view
   $scope.userRole = false;
}
</script>