Ng-class однократная привязка

Мне интересно, возможно ли иметь ng-класс с привязкой к классу один раз и классу, которые оцениваются каждый цикл дайджеста.

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

Я знаю, что однажды могу связать полный ng-класс с ng-class="::{...}" но мне нужно в одно время связать определенное выражение

Конечно, эта вещь не работает:

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

Есть ли способ сделать это?

Ответы

Ответ 1

Метод 1:

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

Метод 2:

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

Ответ 2

Один из способов, которым я могу думать об этом (если бы я следовал тому, что вы пытались сказать), следующий:

.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

Ответ 3

Важной частью односвязной привязки является то, что она не должна быть привязана до тех пор, пока выражение не будет undefined. Самый лучший ответ до сих пор, by @ifadey, его метод 1 оценивает пустую строку, когда выражение 'undefined, которое получает привязку. Это противоречит ожидаемому поведению функции. Метод 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 : '')}}"