0

ユーザーが許可されているかどうかに基づいて、ツールチップ ( 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.');
                });
            });
        }
    };
}]);

誰かアイデアはありますか？

Update 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

$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 に答える
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 に答える