Question

我想改进目前的解决方案。

我有一个大菜单使用＆lt; ul＆gt;和＆lt; li＆gt;标签。我只需向用户显示＆lt; li＆gt;他们有权访问的标签。

我使用两个指令解决了这个问题：ng-init和ng-show

...
<li ng-init="ok=hasPemission('item1')" ng-show="ok">
  <a href="#/Item1">Item 1</a>
</li>
...

我需要使用'ng-init'来获得稳定的hasPermission结果。我不能使用ng-show="hasPemission('item1')"，因为'hasPemission'返回一个新的'promise'对象，ng-show有不稳定表达式的问题（[$ rootScope：infdig] infinit $ digest loop）。

现在，我想创建一个新的指令来连接这两个指令。我创建了这个，但我认为有一种方法可以重用这两个existent指令。

这是我的新指令：

.directive('myPermissionShow',['$q','$animate','AccessControl',
 function ($q, $animate, AccessControl) {
  return {
   restrict:'A',
     scope: {
      resourceName: '@myPermissionShow'
     },
     link: function ($scope, $element) {
       var user = AccessControl.getLoggedUser();
       AccessControl.hasPermission(user,$scope.resourceName).then(
         function (value) {
           // I copied the line below from ngShow directive:
           $animate[value ? 'removeClass' : 'addClass']($element, 'ng-hide');
         }
       );
     }
  }
}])

所以，我的html改为：

...
<li my-permission-show="item1">
  <a href="#/Item1">Item 1</a>
</li>
<li my-permission-show="item2">
  <a href="#/Item2">Item 2</a>
</li>
...

有没有办法创建这个新指令重用指令'ng-init'和'ng-show'？

这样的事情：

!!!NOT WORKING CODE!!!
.directive('myPermissionShow',['AccessControl',
 function (AccessControl) {
  return {
   restrict:'A',
   replaceAttribute: true, /* this property does not exists... */
   template: 'ng-init="val=hasPermission(user,resourceName)" ng-show="val"',
     scope: {
      resourceName: '@myPermissionShow'
     },
     controller: function ($scope, $element) {
       $scope.hasPemission = AccessControl.hasPermission;
       $scope.user = AccessControl.getLoggedUser();
     }
  }
}])
!!!NOT WORKING CODE!!!

AngularJS：如何创建一个加入existents指令的新指令？

0 个答案: