Angular ng-repeat не обновляется после внутреннего изменения модели Notification Factory

В моем приложении Angular у меня есть простая фабрика уведомлений, которая позволяет мне хранить и получать информацию, которую я хочу передать пользователю:

(function() {
    'use strict';

    angular
        .module('peaches')
        .factory('NotificationFactory', factory);

    // factory.$inject = ['dependencies'];

    /* @ngInject */
    function factory() {

        var messages = [];

        var service = {
            postAlert: postAlert,
            getAlerts: getAlerts,
            deleteAlert: deleteAlert
        };

        return service;

        function postAlert(alert) {
            messages.push(alert);
            if (alert.duration) {
                setTimeout(function() {
                    deleteAlert(alert);
                }, alert.duration)
            }
        }

        function getAlerts() {
            return messages;
        }

        function deleteAlert(alert) {
            messages.splice(messages.indexOf(alert), 1);
        }
    }
})();

Как вы можете видеть в функции postAlert, я хочу иметь возможность удалить уведомление, если указанное уведомление имеет свойство duration, через duration количество миллисекунд.

Цель состоит в том, чтобы определенные виды уведомлений автоматически исчезали через несколько секунд, а не требовали взаимодействия для закрытия.

Это образец уведомления:

var reportSaved = {
    msg: "Report saved.",
    type: "success",
    duration: 1500
}

введите здесь описание изображения

Однако происходит то, что, хотя setTimeout работает по назначению и эффективно удаляет уведомление после набора duration, элемент все еще рисуется до тех пор, пока я не сменю страницу (после чего он исчезает, как предполагалось), поэтому ng-repeat никогда не обновляется после вызова deleteAlert с моей фабрики.

Это HTML:

<div class="notification" ng-repeat="alert in vm.alerts(); track by $index" ng-cloak>
    <i ng-if="alert.type === 'notification'" class="fa fa-spinner"></i><i ng-if="alert.type === 'success'" class="fa fa-check-circle"></i> {{alert.msg}}
</div>

Как лучше всего подойти к этой проблеме?


person Tiago    schedule 19.11.2015    source источник
comment
Попробуйте использовать $timeout/$interval вместо нативных. Оболочка Angulars запускает цикл дайджеста при запуске. В противном случае вы потенциально можете оказаться в ситуации, когда ваша модель изменена, но ваше представление не обновляется. Это потенциально может быть проблемой.   -  person ste2425    schedule 19.11.2015


Ответы (1)


Попробуйте использовать angular $timeout вместо setTimeout. Разница в том, что $timeout запускает цикл дайджеста, необходимый для ng-repeat для обновления значений.

person baklazan    schedule 19.11.2015
comment
Вот оно... Такое простое решение. - person Tiago; 19.11.2015