Question

我有一个指令，只有在我的身份验证服务告诉我时才会呈现：

<div my-loggedin-directive ng-if="security.isAuthenticated()"></div>

指令本身很空：

.directive('myLoggedinDirective', [
    function() {
        return {
            templateUrl: 'modules/myLoggedinDirective.tpl.html',
            restrict: 'A',
            replace: true,
            link: function($scope) {
                 $scope.$on('$destroy', function() {
                     console.log('$destroy');
                 });
            }
        };
    }
]);

由于我的指令应该在我登录时始终呈现，因此ngIf逻辑应该在指令声明中，而不是在ng-if中（没有ngIf的指令会完全被破坏）。

我如何更改指令代码（在指令声明中注入安全服务上的测试）知道我想要与ngIf相同的行为？：

nfIf

true

指令才会出现在DOM中
nfIf解析为false时自动调用$ destroy？

我尝试使用compile功能和观察者观看security.isAuthenticated()但没有成功

Answer 1

声明将安全对象传递到指令的额外指令属性：

<div my-loggedin-directive my-security='security'></div>

指令应该包括范围，确保它使用双向绑定：

.directive('myLoggedinDirective', [
function() {
    return {
        scope: {
            security: "=mySecurity"
        }
        templateUrl: 'modules/myLoggedinDirective.tpl.html',
        restrict: 'A',
        replace: true,
        link: function($scope) {
             $scope.$on('$destroy', function() {
                 console.log('$destroy');
             });

             $scope.$watch('security', function(newVal, oldVal) {
                 if (newVal.isAuthenticated()) {
                 // do something
                 } else {
                 // do something
                 }
             });
        }
    };
}

]）;

现在你可以访问你的太阳穴中的$ scope.security变量myLoggedinDirective.tpl.html

<div ng-if="security.isAuthenticated()">...</div>

Angularjs指令条件渲染没有ng-if

1 个答案: