使用ng-class加載指令時類指令不起作用

我試圖使用ng-class加載'class'指令。但是當我這樣做時，我的指令永遠不會被加載。該指令是一個多用途指令，我不想在此創建一個獨立的作用域。它只會在需要時才加載，基於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); 
     } 
    }; 
}]);

來源

2013-10-07 vaibinewbee

可能你只是忘了設置：'restrict：'C''？ – Cherniv

其集合。請參閱我的帖子更新。 – vaibinewbee

可能會嘗試以下語法：'class =「someClass」ng-class =「{tooltip：enabled}」' – Cherniv

有趣的問題。看起來你不想使用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，但這似乎是你的正確軌道。我做了一個fiddle與此在行動。

希望這會有所幫助！

來源

2014-03-08 07:12:39 hassassin

在'ngClass'所做的更改時重新編譯元素應該嵌入到Angular core IMHO中。感謝hassassin提出這個想法。順便說一句，我嘗試了http://stackoverflow.com/questions/22733848/angularjs-attempt-to-dynamically-apply-directive-using-ngclass-causing-weird-fu，並得到了一些奇怪的行爲。不知道問題出在你的代碼，我的實現，還是Angular，但我採取了另一種方法，並沒有進一步追求。 – poshest

嗯。那麼，我很高興你找到了另一種方法，我的答案似乎在工作，在人爲的情況下。在另一個問題中你的小提琴有一個問題，它使用的焦點集中在事物的所有元素上，如果你點擊一次輸入，它會添加類，如果你再次關注，它會重新添加它並重新編譯（指令的數量增加）。這些東西可能是固定的，但答案被接受了。這個似乎適合在這裏。需要幫助請叫我。 – hassassin

我們可能應該在另一個線程中討論這個問題，但是......是的，你是對的我稍後將添加'removeClass（）'位，並且不期望addClass將兩個相同的類添加（它不在jQuery中）。您的評論啓發了我添加'else {elt.removeClass（scope.dynamicClass）; }'並且將'$ compile'移到'if'之外，但是這隻會使jsFiddle完全崩潰http://jsfiddle.net/ss6Y5/10/。如果你想爲另一個線程貢獻一個解決方案，我至少會投票贊成。我更喜歡使用你的代碼的模式，但我不知道是否禮貌地收回已接受的答案！ – poshest

使用ng-class加載指令時類指令不起作用

回答

相關問題