Question

我试图建立一个自定义指令来显示页面上的项目或根据授权数据完全删除它们，我明显遗漏了一些东西，因为它不起作用，我和我＃39;我很难搞清楚原因。

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

其中说要获取NgIf源代码的副本，并对其进行修改（如下所示）。

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

我不确定我做错了什么。在使用自定义指令时我需要做的步骤中是否还有其他内容没有记录，或者我是否错过了一个步骤？定期ng-if在同一页上工作就好了。

编辑：我应该注意AuthorizeService.isAuthorizedForOne返回一个true或false的promise值。这在其他情况下工作正常。

'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
));

DEMO http://plnkr.co/edit/BhubrfMAiW3K4ANI3pTx

Angular Custom Directive - 如何让它像Ng-if一样表现

1 个答案: