Question

我想创建一个可以为访客用户隐藏特定元素的指令。目前我有这个：

angular.module('someMod')
    .directive('premiumUser', premiumUser)
    .controller('PremiumUserCtrl', PremiumUserCtrl);

function premiumUser () {
    return {
        restrict   : 'A',
        link       : premiumUserLink,
        controller : 'PremiumUserCtrl',
    };
}

function premiumUserLink (scope, element) {
    if (!scope.checkLoggedIn())
        element.hide();
}

function PremiumUserCtrl ($scope, sessionManager) {
    $scope.checkLoggedIn = function () {
        return sessionManager.isUserLoggedIn();
    };
}

所以当我将这个指令应用于这样的元素时：

<ANY premium-user></ANY>

它可以工作，但它不会阻止目标指令的控制器初始化和执行onInit代码。

如何修改此指令以防止控制器初始化？

提前致谢！

Answer 1

如果我理解正确，ng-if应该有效。我想如果您只是使用范围变量来检查其可用性。然后将scope.var放在模板中的指令标记上。

<any premium-user ng-if="iSGuest"></any>

/ / ctrl

$scope.isGuest = function() {
  //processing for guest
};

Answer 2

element.hide()仅设置CSS属性display: none，因此任何指令及其控制器仍将初始化。

我会实现一个自定义ng-if - 指令，如下所示：

function premiumUser ($animate) {
    return {
        restrict: 'A',
        terminal: true,
        priority: 600,
        transclude: 'element',
        link: function(scope, element, attrs, ctrl, transclude) {
            if (scope.checkLoggedIn()) {
              var childScope;

              if (!childScope) {
                childScope = scope.$new();
                transclude(childScope, function(clone) {
                    $animate.enter(clone, element.parent(), element);
                });
              }
            }
        },
        controller: 'PremiumUserCtrl'
    };
}

如果您有兴趣了解有关其工作原理的更多信息，请查看ngIf文档和源代码。

用于隐藏访客用户元素的指令

2 个答案: