AngularJs 1.2.2: среди ngRepeats, используя $ интервал, ngShow обновляется, но представление не

Question

Вот ngRepeat, который повторяет оповещения для пользователей. Я хочу показывать каждое предупреждение по одному за период времени. Я использую ngShow и переменную-счетчик $ scope.showedItem.

Шаблон:

        <div class="container" >
            <div ng-repeat="headerNotification in headerNotification.list" ng-show="{{showedItem==$index}}">
                    <h3>{{headerNotification.getText()}}</h3>
                    <button ng-click="headerNotification.do()" class="btn btn-warning">{{headerNotification.getButtonText()}}</button>
            </div>
        </div>

Контроллер:

componentHeaderModule.controller('headerController', [
'$rootScope',
'$scope',
'componentHeaderNotification',
'$interval',
function ($rootScope, $scope, componentHeaderNotification, $interval)
{
    ...
    $scope.showedItem = 1;

    $interval(function(){
        $scope.showedItem++;
        if ($scope.showedItem > $scope.headerNotification.list.length)
            $scope.showedItem = 0;
    }, 5000);
}]);

Когда я смотрю на DeveloperTool, я вижу, что значение ng-show меняется каждые 5 секунд, однако представление не обновляется, все время отображается одно и то же предупреждение. Даже класс предметов не меняется.

В чем может быть проблема? Мое понимание двухстороннего связывания - большая ошибка?

Answer 1

ngShow вычисляет угловое выражение, поэтому вам не нужны двойные фигурные скобки внутри него.

Итак, внутри:

<div ng-repeat="headerNotification in headerNotification.list" ng-show="{{showedItem==$index}}">

изменить это:

ng-show="{{showedItem==$index}}"

к этому:

ng-show="showedItem==$index"

Angular по умолчанию не ставит $watch на атрибуты (что очень помогает с производительностью). Вот почему Angular ожидает, что вы передадите выражение для его оценки.

Когда вы используете двойные фигурные скобки внутри выражения, то получается, что выражение внутри фигурных скобок вычисляется только один раз, когда директива связана и этот результат (в вашем случае true или же false) затем передается и используется навсегда, никогда не меняясь - даже если значение атрибута изменяется, Angular никогда не замечает (так как нет $watch в теме).

Например, если showedItem равен 0, когда соединение сделано, то первый ngRepeat запись пройдена true в то время как каждая другая запись пройдена false- в результате чего вы видите, ngShow никогда не меняется.

Вы хотите, чтобы выражение оценивалось каждый цикл $digest, поэтому вы передаете выражение в.