在ng-class表達式中使用「this」

我想在ng-class條件中使用'this'，但它不起作用。在ng-class表達式中使用「this」

我基本上是想這樣的：

<div class=".." ng-class="{hidden: $(this).find(..).hasClass('trigger')}"> 
</div>

我想AngularJS應用基於不同類的嵌套元素上存在的類「隱藏」。

我應該將複雜的代碼移動到控制器上嗎？我如何引用正在定義的元素ng-class？

問候！

來源

2015-10-29 Patrik Beck

'this'不會是一個dom元素，它將是範圍本身，因爲範圍有一個稱爲this的自引用屬性。而且這也不是解決問題的有效方法。您可能想要將其綁定到啓用觸發器的屬性。 – PSL

總是建議把複雜的邏輯放在JS代碼中，並嘗試做* Angular *方法而不是依靠jQuery – Kulbhushan

這是關於jQuery to Angular的漂亮討論：http://stackoverflow.com/questions/14994391/如果我有一個jQuery的背景 – Kulbhushan

在這種情況下，您可能想創建一個自定義指令。一個好的經驗法則是，你不應該直接從控制器進行操作。在你的情況自定義指令是這樣的：

... 
.directive('applyTrigger', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      var triggerEl = element.find(..); 
      scope.$watch(function() { 
       return triggerEl.attr('class'); }, 
       function(newValue){ 
        if(triggerEl.hasClass('trigger')) { 
         element.addClass('hidden'); 
        } else { 
         element.removeClass('hidden'); 
        } 

       }); 

     }; 
    } 
});

然後你可以使用它的父DIV：

<div class=".." applyTrigger> 
</div>

試試這個，讓我知道你發現了什麼！

來源

2015-10-29 16:56:47

這個作品！感謝您向我介紹指令。閱讀完所有評論和額外閱讀後，我決定重新構建整個事情。 –

你應該使用控制器告訴你是否應該設置一個ng類。

<div class=".." ng-class="{hidden: {{showthisdiv}}}"> 
</div>

然後在控制器中設置showthisdiv。

來源

2015-10-29 16:29:36

如果'showthisdiv'在'$ scope'或'vm'上，我認爲它不需要使用句柄'{{}}'，它應該是'ng-class =「{hidden：showthidiv}」' – Kulbhushan

在ng-class表達式中使用「this」

回答

相關問題