ng-Klasse einmal verbindlich

Question

Ich frage mich, ob es möglich ist, eine ng-Klasse mit der Klasse einmal gebunden und Klasse, die jeden Digest-Zyklus ausgewertet werden.

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

Ich weiß, dass ich einmal die komplette ng-Klasse mit ng-class="::{...}" binden kann, aber mein Bedürfnis ist zu einer Zeit binden, um einen bestimmten Ausdruck

Natürlich ist diese Sache nicht funktioniert:

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

Gibt es eine Möglichkeit, es zu tun?

Answer 1

Methode 1:

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

Methode 2:

ng-class="::{'my-class': expression}" 

Answer 2

Eine Möglichkeit, die ich denken kann, dies zu tun (wenn ich gefolgt, was Sie sagen wollten) ist wie folgt ...

.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

Answer 3

Ein wichtiger Teil der einmaligen Bindung ist, dass sie nicht gebunden wird, bis der 'Ausdruck' nicht undefiniert ist. Die bisher beste Antwort von @ifadey ist, dass Methode 1 eine leere Zeichenfolge berechnet, wenn "Ausdruck" nicht definiert ist und gebunden wird. Dies widerspricht dem erwarteten Feature-Verhalten. Methode 2 ist in diesem späten Bindungsszenario ebenso wenig hilfreich.

Tun Sie dies richtig, direkt op Frage zu beantworten:

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

oder mehr technisch korrekt, aber hässlich:

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