2015-09-24 31 views
24

Mi chiedo se sia possibile avere una classe ng con classe una volta vincolata e classe che viene valutata ogni ciclo di digestione.ng-class binding una sola volta

<div ng-class="{'one_time_binded_class': isMonkey(), 'not_one_time_binded_class': isUnicorn()}"></div> 

So che posso una volta legare il completo ng classe con ng-class="::{...}" ma il mio bisogno è di una volta legare una particolare espressione

Naturalmente, questa cosa non funziona:

<div ng-class="{'my_static_class': ::isMonkey(), 'my_dynamic_class': isUnicorn()}"></div> 

C'è un modo per farlo?

risposta

38

Metodo 1:

class="some-class {{::expression ? 'my-class' : ''}}" 

Metodo 2:

0

Un modo che posso pensare di fare questo (se ho seguito quello che stavi cercando di dire) è la seguente ...

.blue{ 
    color: blue; 
} 
.underline{ 
    text-decoration: underline; 
} 
.lineThrough{ 
    text-decoration: line-through; 
} 

<div ng-app ng-controller="myCtrl"> 
    <p ng-class="{'blue': isMonkey()}" class="{{isUnicorn() ? dynamicClass: ''}}">My Text</p> 
    <button ng-click="monkey = !monkey">Monkey</button> 
    <button ng-click="unicorn = !unicorn">Unicorn</button> 
    <button ng-click="toggleClass()">Toggle</button> 
</div> 

function myCtrl($scope) { 
    $scope.dynamicClass = "underline"; 
    $scope.monkey = true; 
    $scope.unicorn = true; 
    $scope.isMonkey = function() { 
     return $scope.monkey; 
    } 
    $scope.isUnicorn = function() { 
     return $scope.unicorn; 
    } 
    $scope.toggleClass = function(){ 
     $scope.dynamicClass = $scope.dynamicClass === "underline"? "lineThrough": "underline"; 
    } 
} 

JSFiddle

+0

Grazie per la risposta, ma la mia domanda è circa una volta vincolante. l'espressione per "my_static_class" viene valutata una volta e l'espressione per "my_dynamic_class" viene valutata ogni ciclo di digest. i nomi delle classi sono scelti male scusate ... – frlinw

0

Una parte importante del bind di un tempo è che non è vincolato finché l'espressione non è indefinita. La migliore risposta finora, per @ifadey, il suo Metodo 1 valuta una stringa vuota quando 'espressione' non è definita, il che è vincolato. Questo è in contrasto con il comportamento della funzione prevista. Il metodo 2 è altrettanto utile in questo scenario di associazione tardiva.

lo fanno correttamente, rispondendo direttamente alla domanda di op:

class="some-class {{::expression ? 'one-time-class' : undefined}}" 
ng-class="{ 'my-dynamic-class' : expression2 }" 

o il più tecnicamente corretto ma brutto:

class="some-class {{::expression ? 'one-time-class' : (expression===undefined ? undefined : '')}}" 
Problemi correlati