Question

我想创建一个指令，根据用户是否授权显示工具提示（from AngularJs Bootstrap UI）。

完成工作并添加所需的属性tooltip和tooltip-position 但工具提示未显示。

如果我将我的代码生成的元素与具有工具提示的元素作为普通html进行比较，除class="ng-scope"以外的相同内容，手动添加此类无效。

这是我的指令代码：

proGamersApp.directive('registered', ['$rootScope', 'authService', function ($rootScope, authService) {
    return {
        restrict: 'A',
        scope: true,
        link: function ($scope, element, attrs) {
            element.addClass('faded');

            $rootScope.$watch('user.role', function (role) {
                $scope.$apply(function () {
                    var accessLevel = routingConfig.accessLevels[attrs.accessLevel];
                    if (!authService.authorize(accessLevel)) {
                        element.attr('tooltip-placement', 'bottom');
                        element.attr('tooltip', 'Avaiable for registered users.');
                    } else
                        element.attr('tooltip-placement', 'bottom');
                    element.attr('tooltip', 'Avaiable for registered users.');
                });
            });
        }
    };
}]);

任何人都知道吗？

更新3 删除了'$compile(element)，因为它表示未定义的函数，并更改了$ apply函数的使用。仍然在'$ digest已在进行中'错误。

新代码：

proGamersApp.directive('registered', ['$rootScope', 'authService', function ($rootScope, authService, $compile) {
    return {
        restrict: 'A',
        scope: true,
        link: function ($scope, element, attrs) {
            element.addClass('faded');

            $rootScope.$watch('user.role', function (role) {
                var accessLevel = routingConfig.accessLevels[attrs.accessLevel];
                if (!authService.authorize(accessLevel)) {
                    element.attr('tooltip-placement', 'bottom');
                    element.attr('tooltip', 'Avaiable for registered users.');
                } else {
                    element.attr('tooltip', 'Avaiable for registered users.');
                }

                $scope.$apply(element);
            });

        }
    };
 }]);

Answer 1

另一种处理此类事情的方法是让控制器在其范围内提供一个确定访问权限的变量或函数，然后在dom中使用ng-hide和ng-show来设置工具提示，或者不管。

<div data-ng-controller="SessionCtrl">
    <div data-ng-hide="session.active()">
        put your logged in user stuff here
    </div>
    <div data-ng-hide="session.active()">
        put your non logged in user stuff here
    </div>
</div>

Answer 2

尝试使用$compile，如下所示：

proGamersApp.directive('registered', ['$rootScope', 'authService', '$compile', 
function ($rootScope, authService, $compile) { 
    return { 
        restrict: 'A', 
        scope: true, 
        link: function ($scope, element, attrs) { 
            element.addClass('faded');
            $rootScope.$watch('user.role', function (role) {
                var accessLevel = routingConfig.accessLevels[attrs.accessLevel];
                if (!authService.authorize(accessLevel)) {
                    element.attr('tooltip-placement', 'bottom');
                    element.attr('tooltip', 'Avaiable for registered users.');
                } else {
                    element.attr('tooltip', 'Avaiable for registered users.');
                }
                $compile(element.parent().contents())($scope);
            });
        }
    };
}]);

AngularJs工具提示指令

2 个答案: