0

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

它做得很好并添加了所需的属性tooltip，tooltip-position 但工具提示没有显示。

如果我将我的代码生成的元素和具有工具提示的元素与普通 html 进行比较，则其相同 except 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);
            });

        }
    };
 }]);
4

2 回答 2

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>
于 2013-09-26T15:55:08.953 回答
1

尝试$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);
            });
        }
    };
}]);
于 2013-09-30T05:59:15.550 回答