ng-class 원타임바인딩

ng-class 원타임바인딩

각 다이제스트 사이클에 대해 평가되는 클래스 1회 바인드 및 클래스 ng-class가 가능한지 궁금합니다.

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

완전한 ng-class를 한 번 바인딩할 수 있습니다.ng-class="::{...}"하지만 제 욕구는 한 번쯤은 특정 표현을 묶어서

물론, 이것은 동작하지 않습니다.

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

그것을 할 방법이 있나요?

방법 1:

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

방법 2:.

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

(당신이 말하려고 하는 것을 따라 했을 경우) 이것을 하는 한 가지 방법은 다음과 같습니다.

.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

하나의 시간 바인딩의 중요한 부분은 '식'이 정의되지 않을 때까지 바인딩되지 않는다는 것입니다.지금까지의 최선의 답변은 @ifadey에 의해 메서드1은 '식'이 정의되지 않았을 때 빈 문자열로 평가되며, 이 문자열은 바인드됩니다.이는 예상된 기능 동작과 반대됩니다.이 레이트바인딩 시나리오에서는 메서드2도 마찬가지로 도움이 되지 않습니다.

이 절차를 올바르게 수행하여 op의 질문에 직접 답변합니다.

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

또는 기술적으로 더 정확하지만 추악한 경우:

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

언급URL : https://stackoverflow.com/questions/32767044/ng-class-one-time-binding