Question

我的angular指令中的视图似乎在基础数据更改时不会更新。我不确定我是否错过了一个消化周期，或者我似乎无法弄清楚发生了什么

指令：

(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: {}
    };
}
})();

控制器：

(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>

然后在页面控制器中

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);
    }
}

行为是零星的，有时消息指令显示消息，有时则不显示消息。奇怪的是启用按钮工作正常（换句话说，控制器中的方法被调用以启用/禁用按钮），但指令绑定不更新。有没有发生的事情是＆＃34;断开＆＃34;服务，控制器，指令？

Answer 1

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

Answer 2

每次对消息执行某些操作时，都需要通过调用getMessages（）来刷新视图。

someArray = [["0","1","1","0"] ["0","1","0","1"] ["0","1","0","1"] ["0","1","1","0"]]无法自动更新。

控制器：

self.alerts = messageService.getMessages()

服务：

 self.alerts = messageService.obj.messages;

Angular Controller在服务更新时未更新

2 个答案: