时间戳

首页 > 解决方案 > 为特定功能复制 ng-if

javascript - 为特定功能复制 ng-if

问题描述

我正在尝试为我们的 AngularJS 应用程序创建一个指令。它将像这样使用：

<div requires-permissions="['permission_1', ...]">
  This should only show if the user has appropriate permissions.
</div>

它的功能很像ng-if它会删除或替换元素。如果没有这个指令，我需要为每个这样的元素编写这个：

<div ng-if="ctrl.User.has_permissions(['permission_1', ...])">etc.</div>

并且每个控制器都需要对用户服务的引用。我已经查看了 ng-if 的代码，但我无法确定代码的正面或反面。

我很确定我可以使用 jqlite 的删除功能删除元素。以后怎么换？

标签： javascriptangularjs

解决方案

我已经为您的需求实现了类似的东西，它调用experimentIF

export function experimentIf(ngIfDirective, experimentsManager) {
    const ngIf = ngIfDirective[0];
    const NAME = 'experimentIf';

    return {
        restrict: ngIf.restrict,
        priority: ngIf.priority + 1,
        terminal: ngIf.terminal,
        transclude: ngIf.transclude,
        link: function ($scope, $element, $attr) {
            const experimentName = $attr[NAME];

            $attr.ngIf = function () {
                return experimentsManager.isExperimentEnabled(experimentName);
            };
            ngIf.link.apply(ngIf, arguments);
        }
    };
}

基本上，它会在需要时重用 ng-if 的配置，并且只更改断言部分。就我而言，它是使用experimentsManager服务。

当您注入ngIfDirective.

推荐阅读