javascript – AngularJS:什么是最好的做法添加ngIf到指令以编程方式?

我想创建一个指令,检查一个元素是否应该存在于dom基于来自一个服务的值(例如检查用户角色)。

相应的指令如下所示:

angular.module('app', []).directive('addCondition', function($rootScope) {
    return {
        restrict: 'A',
        compile: function (element, attr) {
          var ngIf = attr.ngIf,
              value = $rootScope.$eval(attr.addCondition);

          /**
           * Make sure to combine with existing ngIf!
           * I want to modify the expression to be evalued by ngIf here based on a role 
           * check for example
           */
          if (ngIf) {
            value += ' && ' + ngIf;
          }

          attr.$set('ng-if', value);
        }
    };
});

在结束时,元素具有附加的ng-if属性,但不知何故它不适用于元素,并且它仍然存在于dom中。所以这显然是一个错误的方法。

这个小提琴显示问题:http://jsfiddle.net/L37tZ/2/

谁能解释为什么会发生这种情况?有没有其他方法可以实现类似的行为?应考虑现有的ngIfs。

解:

用法:< div rln-require-roles =“['ADMIN','USER']”>当这些角色需求不饱和时,我将被隐藏!< / div>

.directive('rlnRequireRoles', function ($animate, Session) {

  return {
    transclude: 'element',
    priority: 600,
    terminal: true,
    restrict: 'A',
    link: function ($scope, $element, $attr, ctrl, $transclude) {
      var block, childScope, roles;

      $attr.$observe('rlnRequireRoles', function (value) {
        roles = $scope.$eval(value);
        if (Session.hasRoles(roles)) {
          if (!childScope) {
            childScope = $scope.$new();
            $transclude(childScope, function (clone) {
              block = {
                startNode: clone[0],
                endNode: clone[clone.length++] = document.createComment(' end rlnRequireRoles: ' + $attr.rlnRequireRoles + ' ')
              };
              $animate.enter(clone, $element.parent(), $element);
            });
          }
        } else {

          if (childScope) {
            childScope.$destroy();
            childScope = null;
          }

          if (block) {
            $animate.leave(getBlockElements(block));
            block = null;
          }
        }
      });
    }
  };
});

在指令中添加优先级是非常重要的,否则不会评估附加到该元素的其他指令!

最佳答案
你的问题的第一部分,“为什么?”,是我可以回答:

你遇到的问题是你不能动态地应用指令到元素,而不需要在元素上调用$ compile。

如果在设置属性之后调用$ compile(element)(element.scope()),则会遇到堆栈溢出,因为您正在编译自己,这会导致您编译自己,导致您自己编译等等。

第二部分,“怎么实现”,我有麻烦。我尝试了几种方法(例如用嵌套的ng-if转换内容),但我不能准确地得到你正在寻找的行为。

我认为下一步可能是研究ng-if的代码,并尝试直接在你的指令中实现类似的东西。

这是一个first pass of getting it working.我希望它需要一些清理和修改,以使它工作如何你真正想要它,但是。

转载注明原文:javascript – AngularJS:什么是最好的做法添加ngIf到指令以编程方式? - 代码日志