Директива класса не работает при использовании ng-class для загрузки директивы

Я пытаюсь загрузить директиву class, используя ng-class. но моя директива никогда не загружается, когда я это делаю. Директива многоцелевая, и я не хочу создавать для нее изолированную область. он будет загружаться только при необходимости, на основе условий класса ng, следовательно, не используя атрибут или директиву элемента. кто-нибудь пытался сделать это и преуспел?

эта директива вызывается с использованием <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);
        }
    };
}]);

person Vaibhav Pingle    schedule 07.10.2013    source источник
comment
может быть, вы просто забыли установить: restrict: 'C' ?   -  person Ivan Chernykh    schedule 07.10.2013
comment
его набор. пожалуйста, смотрите мое обновление к сообщению.   -  person Vaibhav Pingle    schedule 07.10.2013
comment
можно попробовать этот синтаксис: class="someClass" ng-class="{tooltip: enabled}"   -  person Ivan Chernykh    schedule 07.10.2013
comment
это тоже не сработало. У меня есть немного больше информации. Элемент, который вызывает эту директиву, является частью другого шаблона, который загружается как часть другой директивы. Это как-то связано с этим? Когда я пытаюсь загрузить ту же директиву в качестве атрибута, она работает нормально.   -  person Vaibhav Pingle    schedule 07.10.2013
comment
Я с той же проблемой. Вы смогли это решить?   -  person Anirudhan J    schedule 06.03.2014


Ответы (1)


Интересная проблема. Кажется, вы не хотите использовать директиву 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, но это, кажется, правильный путь для вас. Я сделал скрипку с этим в действии.

Надеюсь это поможет!

person hassassin    schedule 08.03.2014
comment
Re-$compileing элемент после изменений, сделанных ngClass, должен быть встроен в ядро ​​​​Angular IMHO. Спасибо Хассасин за эту идею. Между прочим, я попробовал stackoverflow.com/questions/22733848/ и получая странное поведение. Не уверен, была ли проблема в вашем коде, моей реализации или Angular, но я выбрал другой подход и не стал его развивать. - person poshest; 10.04.2014
comment
Хм. Что ж, я рад, что вы нашли другой подход, мой ответ, похоже, работает в надуманном случае. Ваша скрипка в другом вопросе имеет проблему, которую она использует для всех элементов в вещах, также если вы щелкнете ввод один раз, он добавит класс, если вы снова сфокусируетесь, он добавит его СНОВА и скомпилирует (количество директив увеличивается ). Эти вещи можно было исправить, но ответ на этот вопрос был принят. Вот этот вроде подходит. Позвольте мне знать, если вам нужно что-нибудь еще. - person hassassin; 10.04.2014
comment
Вероятно, нам следует обсудить это в другой ветке, но... Да, вы правы, я собирался добавить бит removeClass() позже и не ожидал, что addClass добавит один и тот же класс дважды (в jQuery этого нет). ). Ваш комментарий вдохновил меня добавить else { elt.removeClass(scope.dynamicClass); } и переместить $compile за пределы if, но это просто приводит к полному сбою jsFiddle jsfiddle.net/ сс6Y5/10. Если вы хотите предложить решение в другой ветке, я бы, по крайней мере, проголосовал за него. Мне гораздо больше нравится шаблон с использованием вашего кода, но я не знаю, вежливо ли отказываться от принятого ответа! - person poshest; 11.04.2014