5

我正在尝试使用 ng-class 加载“类”指令。但是当我这样做时，我的指令永远不会加载。该指令是一个多用途指令，我不想在此创建一个孤立的范围。它只会在需要时加载，基于 ng-class 条件，因此不使用属性或元素指令。有没有人尝试过这样做并成功了？

这个指令被称为使用<div ng-class="someClass {{tooltip: enabled}}"></div> 这里enabled是一个范围变量。

app.directive('tooltip', ['$timeout', '$location', '$rootScope', function (timer, $location, $rootScope) {
    return {
        restrict: 'C',
        transclude: true,
        link: function (scope, element) {
            var printContent = function () {
                /*  uses the content of .tooltip-content if it is a complex html tooltip, 
                    otherwise
                    you can use the title attribute for plaintext tooltips
                */
                var tooltipContent = $(element).find('.tooltip-content').html();
                if (!tooltipContent) {
                    tooltipContent = $(element).attr('title');
                }
                $(element).tooltip({
                    content: tooltipContent,
                    items: "img, a, span, button, div",
                    tooltipClass: "tooltip",
                    position: { my: "left+30 top", at: "right top", collision: "flipfit" },
                    show: { effect: "fadeIn", duration: "fast" },
                    hide: { effect: "fadeOut", duration: "fast" },
                    open: function (event, ui) { $rootScope.tooltipElement = event.target; }
                });
            };
            timer(printContent, 0);
        }
    };
}]);
4

1 回答 1

0

有趣的问题。似乎您不想使用 ng-class 指令，因为它不会在添加类后重新编译内容。您可能希望创建自己的动态类指令，该指令在值为 true 时实际重新编译：

app.directive('dynamicClass', function($compile) {
    return {
        scope: {
            dynamicClassWhen: '=',
            dynamicClass: '='
        },
        link: function(scope, elt, attrs) {
            scope.$watch('dynamicClassWhen', function(val) {
                if (val) {
                    console.log(val);
                    elt.addClass(scope.dynamicClass);
                    $compile(elt)(scope);
                }
            });
        }
    };
});

您可能需要修改它以获得删除类的能力，并取决于它是否$compile足以满足您或您是否需要进一步操作 html，但这似乎是您的正确轨道。我在实际操作中对此做了一些调整。

希望这可以帮助！

于 2014-03-08T07:12:39.933 回答