启用 Angular 的内置指令(如 ng-if)以访问自定义指令中的变量？

Question

在以下选择字段上：

 <select class="form-control" name="userType" ng-model="userType.field" >
        <option value="">Select</option>
            <option has-permission="can-change-to-admin" ng-if="HOW DO I LINK THIS TO THE DIRECTIVE" value="ADMIN">Admin</option>
            <option has-permission="can-change-to-legal-rep" is-permitted="isPermitted" ng-if="isPermitted" value="LEGAL_REP">Legal Representative</option>
       </select>

我已经设置了一个"has-permission"指令，该指令以字符串形式传递，连接到服务并决定用户是否具有该权限。

这是指令：

angular.module('app.common').directive('hasPermission', ['Session', '$state', function (Session, $state) {
    return {
        restrict: 'A',
        scope: {
            hasPermission: '@',
        },
        link: function (scope, el, attributes) {
            var statePermissions = Session.getUserData().statePermissions,
                currentState = $state.current.name;
            scope.isPermitted = true;
            //  HOW CAN I MAKE THE NG-IF FROM THE HTML SEE THIS "ISPERMITTED" VARIABLE?
            if (statePermissions[currentState]) {
                if (statePermissions[currentState].indexOf(scope.hasPermission) === -1) {
                    console.log(statePermissions[currentState])
                    scope.isPermitted = false;
                }
            }
        }
    };
}]);

现在，在指令中，根据某些设置，我可以设置一个值为 true 或 false 的"isAllowedted"变量。

我怎样才能让 ng-if 从选择中看到"isAllowted"变量并按照要求行事？

有什么想法吗？

Answer 1

您可以使用：

attributes.ngIf = $scope.isPermitted

通过这种方式，您可以在指令中设置其真值或假值

编辑：增加了另一种可能性

http://jsfiddle.net/fsa58j33/1/

另一种可能性是向元素添加动态指令：

link: function (scope, el, attrs) {
    el.removeAttr("directive");
    el.attr('ng-if', true);
    $compile(el)(scope);
}

通过这种方式，您不必依赖 HTML，而不必依赖您的指令。可以将任何指令动态添加为属性，然后使用$compile(el)(scope)使其工作。必须从元素中删除指令，否则它将无限循环

Answer 2

我自己想要这个功能，所以构建了这个组件。它可以有所扩展，但涵盖了一个基本的用例。

has-permission.component.js

(function() {
  'use strict';
  angular
    .module('app')
    .component('hasPermission', {
      bindings: {
        permission: '<'
      },
      templateUrl: 'app/common/permissions/has-permission/has-permission.html',
      transclude: true,
      controller: Controller
    });
  /** @ngInject */
  function Controller(PermPermissionMap, PermAuthorization) {
    let ctrl = this;
    ctrl.$onInit = function() {
      let PermissionMap = new PermPermissionMap({
        only: ctrl.permission
      });
      let authorizationResult = PermAuthorization.authorizeByPermissionMap(PermissionMap);
      authorizationResult
        .then(function() {
          ctrl.hasPermission = true;
        })
        .catch(function(rejectedPermission) {
          ctrl.hasPermission = false;
        });
    }
  }

})();

有权限.html

<div ng-if="$ctrl.hasPermission" ng-transclude=""></div>

---

用法

   <has-permission permission="'panel--read'" class="col-md-6">
      <div class="panel panel-app">
        <div class="panel-heading">My Panel</div>
        <div class="panel-content">
          Must have permissions
        </div>
      </div>
    </has-permission>