javascript - 服务更新时 Angular Controller 不更新

Question

当基础数据发生变化时，我的 Angular Directive(指令)中的 View 似乎没有更新。我不确定我是不是错过了摘要周期还是什么，但我似乎无法弄清楚发生了什么

指令:

(function(){
'use strict';
angular.module('app').directive('message', Message);
function Message() {
    var markup = '<div class="slds">'+
                        '<div ng-repeat="message in messageController.alerts">'+
                            '<div class="slds-box slds-theme--{{message.type}}">'+
                                '<a href="#" class="slds-float--right" ng-show="message.canDismiss"'+
                                  ' ng-click="messageController.closeAlert(message)">'+
                                    'Dismiss'+
                                '</a>'+
                                '<h2>'+
                                    '{{message.text}}'+
                                '</h2>'+
                            '</div>'+
                        '</div>'+
                    '</div>';

    return {
        restrict: 'E',
        controllerAs: 'messageController',
        controller: 'MessageController',
        template: markup,
        scope: {}
    };
}
})();

Controller :

(function(){
'use strict';
angular.module('app').controller('MessageController', MessageController);
MessageController.$inject = ['messageService'];
function MessageController(messageService) {
    var self = this;

    self.alerts = messageService.getMessages();

    self.closeAlert = function (message) {
        messageService.removeMessage(message);
    };
}})();

服务:

(function(){
'use strict';
angular.module('app').service('messageService', MessageService);
function MessageService() {
    var self = this;
    var messages = [];

    self.setMessage = function (message, clear){
        if (clear === true){
            self.clear();
        }

        messages.push(message);
    };

    self.getMessages = function(){
        return messages;
    };

    self.removeMessage = function(message){
        var messageIndex = messages.indexOf(message);
        if(messageIndex !== -1){
            messages.splice(messageIndex, 1);
        }
    };

    self.clear = function(){
        messages = [];
    };
}
})();

我让消息显示由按钮上的 ng-disabled 指令触发，因此示例用法是:

<message></message>

<!-- other markup -->

<button type="submit" ng-disabled="!(form.$valid &&
                                    !vm.arePaymentPeriodsExceeded())"
        ng-click="vm.saveStream()">
    Save
</button>

然后在页面 Controller 中

function arePaymentPeriodsExceeded() {

    var totalPeriods = calculateTotalPaymentPeriods();

    setPaymentExceededError(totalPeriods);

    return totalPeriods > vm.loanInfo.loanTerm;
}

function setPaymentExceededError(totalPeriods){

    if(totalPeriods > vm.loanInfo.loanTerm) {

        if(messageService.getMessages().indexOf(tooManyPaymentsMessage) === -1) {
            messageService.setMessage(tooManyPaymentsMessage);
        }

    } else {
        messageService.removeMessage(tooManyPaymentsMessage);
    }
}

行为是零星的，有时消息指令显示消息，有时不显示。奇怪的是按钮的启用工作正常(换句话说， Controller 中的方法被调用以启用/禁用按钮)，但指令绑定(bind)没有更新。是否发生了“断开”服务、 Controller 、指令的事情？

Answer 1

当您调用 messgeService.clear() 时，您应该使用 messages.splice(0)，因为 messages = [] 指向一个新的对象引用，您将失去对旧消息数组的任何 Controller 引用。 messages.splice(0) 将清除数组，同时保持原始对象引用。