Пользовательская директива Angular — как заставить ее вести себя как Ng-if

Я пытаюсь создать пользовательскую директиву, чтобы либо отображать элементы на странице, либо полностью удалять их на основе данных авторизации, и я явно что-то упускаю, потому что это не работает, и мне трудно понять, почему.

Я следовал руководству здесь: http://adamalbrecht.com/2014/09/22/authorization-with-angular-and-ui-router/

В котором сказано взять копию исходного кода NgIf и изменить его (как показано ниже).

Я действительно сбит с толку, потому что он не только не работает должным образом, но даже когда я ставлю точки останова в вызовах функций в директиве, он никогда не достигает этих точек останова.

Я не уверен, что я делаю неправильно. Есть ли что-то еще, не задокументированное в шагах, которые мне нужно сделать, чтобы использовать пользовательскую директиву, или я каким-то образом пропустил шаг? Обычные ng-if работают на той же странице просто отлично.

РЕДАКТИРОВАТЬ: я должен отметить, что AuthorizeService.isAuthorizedForOne возвращает значение обещания, которое либо истинно, либо ложно. Это прекрасно работает в других контекстах.

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

person Doug    schedule 17.10.2015    source источник
comment
это для одного совпадения заменить JSON.parse(value.replace("'", '"'));, использовать регулярное выражение JSON.parse(value.replace(/'/g, '"'));   -  person YOU    schedule 17.10.2015
comment
Спасибо, это хороший улов и избавит меня от головной боли позже.   -  person Doug    schedule 17.10.2015


Ответы (1)


Я думаю, вы могли неправильно понять декларацию директивы.

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

ДЕМО-версия http://plnkr.co/edit/BhubrfMAiW3K4ANI3pTx

person Lauwrentius    schedule 17.10.2015
comment
Я немного смущен вашим плунжером. Не похоже, что вы что-то реализовали для AuthorizeService, но вы получаете контент1 и контент2, отображаемые по-разному (что делает его похожим на то, что он каким-то образом работает). Код по-прежнему не работает в моей среде, но если мы сможем заставить его работать в Plunker, я вполне уверен, что смогу заставить его работать. Не могли бы вы помочь прояснить, что вы делаете? - person Doug; 17.10.2015
comment
Вы были абсолютно правы, это была проблема. По какой-то причине ваш код не работал, но когда я изменил синтаксис директивы, как вы предложили в моем коде, и получил совпадение { ( )} и т. Д., Он работал правильно. Спасибо! - person Doug; 17.10.2015