Angular 自定义指令 - 如何使其表现得像 Ng-if

Question

我正在尝试构建一个自定义指令，以根据授权数据在页面上显示项目或完全删除它们，但我显然遗漏了一些东西，因为它不起作用而且我很难是时候找出原因了。

我一直在关注这里的指南： http://adamalbrecht.com/2014/09/22/authorization-with-angular-and-ui-router/

其中提到复制 NgIf 源代码并修改它（如下所示）。

我真的很困惑，因为它不仅没有按预期工作，而且即使我在指令的函数调用中放置断点，它也永远不会遇到这些断点。

我不确定我做错了什么。为了使用自定义指令，我需要执行的步骤中是否还有其他未记录的内容，或者我是否以某种方式错过了一个步骤？正常的 ng-if 在同一页面上工作就好了。

编辑：我应该注意到 AuthorizeService.isAuthorizedForOne returns 一个 promise 值，要么是 true 要么是 false。这在其他情况下工作正常。

'use strict';
/**
 * @ngdoc directive
 * @name ngIfPermission
 * @restrict A
 *
 * @description
 **/

var ngIfPermissionDirective = ['$animate', function($animate, AuthorizeService) {
  return {
    multiElement: true,
    transclude: 'element',
    priority: 600,
    terminal: true,
    restrict: 'A',
    $$tlb: true,
    link: function($scope, $element, $attr, ctrl, $transclude) {
      console.log("I am here");
      var block, childScope, previousElements;
      $attr.$observe("ngIfPermission", function(value){
        console.log("I am there");
        var permissions = JSON.parse(value.replace(/'/g, '"'));
        AuthorizeService.isAuthorizedForOne(permissions).then(function(auth){
            if (!childScope) {
              $transclude(function(clone, newScope) {
                childScope = newScope;
                clone[clone.length++] = document.createComment(' end ngIfPermission: ' + $attr.ngIfPermission + ' ');
                // Note: We only need the first/last node of the cloned nodes.
                // However, we need to keep the reference to the jqlite wrapper as it might be changed later
                // by a directive with templateUrl when its template arrives.
                block = {
                  clone: clone
                };
                $animate.enter(clone, $element.parent(), $element);
              });
            }
          },
          function(err) {
            if (previousElements) {
              previousElements.remove();
              previousElements = null;
            }
            if (childScope) {
              childScope.$destroy();
              childScope = null;
            }
            if (block) {
              previousElements = getBlockNodes(block.clone);
              $animate.leave(previousElements).then(function() {
                previousElements = null;
              });
              block = null;
            }
        });
      });
    }
  };
}];

我是如何引用它的：

<div ng-if-permission="['OOGY']">You can see this.</div>
<div ng-if-permission='["BOOGY"]'>or this</div>

Answer 1

我想你可能误会了指令的声明。

app.directive( 'ngIfPermissionDirective', function($animate){
    //directive here
));

演示版http://plnkr.co/edit/BhubrfMAiW3K4ANI3pTx

Angular 自定义指令 - 如何使其表现得像 Ng-if

Angular Custom Directive - How to make it Behave Like Ng-if

angularjs

angularjs-directive

angular-ng-if