使用指令复制 ng-if

Question

所以我有这个指令，它允许以声明方式隐藏或显示元素：

<div cdt-visible-to="Admin,Moderator">...</div>

所以我们的 HTML 变得尽可能声明。这就是我们的指令的样子：

eDiscovery.directive('cdtVisibleTo', ['AuthService', function (AuthService) {

    return {

      restrict: 'AE',

      link: function ($scope, elem, attrs) {

        let cdtArray = String(attrs['cdtVisibleTo'] || '')
        .split(/[ ,]+/).map(i => String(i).trim()).filter(i => i);

        let ln = cdtArray.length;

        for (let i = 0; i < ln; i++) {
          let r = cdtArray[i];
          if(AuthService.hasPersona(r)){
            elem.removeAttr('hidden');
            return;
          }
        }

        elem.attr('hidden', 'hidden');

      }
    }
  }]);

所以这就像 ng-show 的替身。

我的问题是 - ng-if 的替身会是什么样子？

使用 Angular 指令从 DOM 中删除元素的最佳方法是什么？

Answer 1

您可以使用 Angular 元素的 .remove() 方法从 DOM 中删除一个元素：首先从你的 elem 中获取 angular 元素，然后使用 remove 函数

要执行此操作：

angular.element(elem).remove();

如果传递给指令的 Personas 没有一个被授权，我想你想从 DOM 中删除它，所以也许你可以使用以下代码：

var notAuthorized = false;
for (let i = 0; i < ln; i++) {
  let r = cdtArray[i];
  if(AuthService.hasPersona(r)){
    notAuthorized = true; //A Persona is authorized
    return;
  }
}

if (notAuthorized) {
    angular.element(elem).remove();
}

angular.element的更多信息和方法： https://docs.angularjs.org/api/ng/function/angular.element

使用指令复制 ng-if

Replicating ng-if with a directive

javascript

angularjs

angular-directive

angular-directive-link