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!!!')   
 }]);

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

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

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

请帮忙！

Answer 1

您的代码对 alertService 有两种不同的含义。在工厂定义里面，指的是工厂本身。在其他地方，它指的是工厂返回的对象。向前推进的最简单方法是向工厂返回的对象添加一些缺少的方法：

return {
    showAlert: function(cssClass, msg){
        alertService.setAlertNeeded();
        alertService.setAlertClass(cssClass);
        alertService.setAlertMessage(msg);
    },

    alertClass: function() { return alertService.alertClass; },     
    alertMessage: function() { return alertService.alertMessage; },
    alertNeeded: function() { return alertService.alertNeeded; }
};

然后，更改您的指令模板，使其在每个摘要周期调用这些函数：

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

然后您应该会看到警告消息。 Try it in a fiddle.

Answer 2

这是我以前用过的一个模式

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!!!'})   
 ]);

当然你也应该通过注册一个函数来删除作用域 destroy 上的对象来进行清理。

例如

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

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

AngularJs update directive after a call to service method

javascript

angularjs

angularjs-directive