javascript - 调用服务方法后 AngularJs 更新指令

Question

我正在尝试创建可重复使用的警报服务，我可以在应用程序中的任何位置调用该服务，只需:

alertService.showAlert('warning', 'something went wrong!');

例如在 ajax 调用后端 api 之后。现在我正在使用工厂和指令，但似乎我做错了什么，因为指令在调用 showAlert 方法后不会更新。现在我有这样的东西:

var srv = angular.module('srv', []);
srv. factory('alertService', ['$timeout', function($timeout){
    var alertService = this;
        alertService.alertNeeded = false;
        alertService.alertClass = '';
        alertService.alertMessage = '';
        alertService.setAlertNeeded = function(){
            alertService.alertNeeded = true
        };
        alertService.setAlertClass = function(type){
            if(type === 'warning')
                alertService.alertClass = 'alert-warning';
            if(type === 'success')
                alertService.alertClass = 'alert-success';
            if(type === 'info')
                alertService.alertClass = 'alert-info';
            if(type === 'danger')
                alertService.alertClass = 'alert-danger';
        };
        alertService.setAlertMessage = function(message){
            alertService.alertMessage = message;
        };

        return {
            showAlert: function(class, msg){
                alertService.setAlertNeeded();
                alertService.setAlertClass(class);
                alertService.setAlertMessage(msg);
            }
        };
 }]).
 directive('myAlerts', ['alertService', function(alertService){
        return {
            restrict: 'A',
            template: '<div ng-class="alertClass" ng-show="alertNeeded">{{alertMessage}}</div>',
            link: function(scope){                   
                    scope.alertNeeded = alertService.alertNeeded;
                    scope.alertMessage = alertService.alertMessage;
                    scope.alertClass = alertService.alertClass;
            }
        }
    }]).
 controller('alertShowingController', ['$scope', 'alertService', function($scope, alertService){
     alertService.showAlert('warning', 'Warning alert!!!')   
 }]);

我的代码看起来并不完全相同，但我只是想展示我正在尝试做的事情:我想从另一个 Controller 调用 alertService.showAlert(...)另一个模块(取决于 srv 模块)，通过这种方式更新 myAlerts 指令中的变量以显示正确的警报。

事情是在调用 showAlert 方法之后设置了值，但在指令代码中我得到 alertService.alertNeeded 作为 undefined。

我对 AngularJs 完全陌生，所以也许我弄错了，但我花了整个晚上让它工作，但我仍然不知道正确的解决方案是什么。

请帮忙!

Answer 1

这是我之前使用过的一个模式

var srv = angular.module('srv', []);
srv.factory('alertService', ['$timeout', function($timeout){
    var alertListeners = [];

    this.register = function (listener) {
        alertListeners.push(listener);
    };

    this.notifyAll = function (data) {
        for (// each listener in array) {
            var listenerObject = alertListeners[i];
            try { // do not allow exceptions in individual listeners to corrupt other listener processing
                listenerObject.notify(data);
            } catch(e) {
                    console.log(e);
            }   
        }
    };
 }]).
 directive('myAlerts', ['alertService', function(alertService){

     var alertDirectiveObserver = function($scope, alertService) {

         this.notify = function(data) {
            /*
             * TO DO - use data to show alert
             */
         };

         alertService.register(this);
     };


   return {
     restrict: 'A',
     template: '<div ng-class="alertClass" ng-show="alertNeeded">{{alertMessage}}</div>',
     controller: ['$scope', 'alertService', alertDirectiveObserver],
     link: function(scope){  
     }
    }
}]).
controller('alertShowingController', ['$scope', 'alertService',   function($scope, alertService){
    alertService.notifyAll({'warning', 'Warning alert!!!'})   
 ]);

当然，您还应该通过注册一个函数来在范围销毁时删除对象来进行清理。

例如

element.on('$destroy', function() {
    alertService.unregister(// some listener id);
});