Question

我已经创建了一个指令来处理我的网络应用中的所有链接。我已成功生成不同的链接对象，具体取决于登录用户具有的角色。以下代码有效，除非我尝试在＆＃34; htmlElement＆＃34;中添加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>

AngularJS：如何动态地将函数添加到指令中的附加html元素

2 个答案: