服务方法的调用后AngularJs更新指令 [英] AngularJs update directive after a call to service method

问题描述

我试图创建resusable警报服务，我想任何地方调用我的应用程序只：

I'm trying to create resusable alert service, which I would call anywhere in my application with just:

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

例如AJAX调用后端API之后。
现在，我使用的是工厂和一个指令，但似乎我做错了什么，因为指令并不showAlert方法的调用之后更新。现在，我有这样的事情：

For example after ajax call to backend api. Right now I'm using a factory and a directive, but It seems I'm doing something wrong, because the directive does not update after a call to showAlert method. Right now I have something like this:

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

我的code看起来不完全一样，但我只是想证明什么，我试图做的：我要打电话 alertService.showAlert（...）从另一个模块另一个控制器（这取决于 SRV 模块），并通过这种方式更新 myAlerts 指令显示适当的警惕。

My code doesn't look exactly the same, but I just wanted to show what I'm trying to do: I want to call alertService.showAlert(...) from another controller in another module (which depends on srv module) and this way update the variables in myAlerts directive to show the proper alert.

问题是调用showAlert方法的值设置之后，但在指令code之内我得到 alertService.alertNeeded 为未定义。

The thing is after call to showAlert method The values are set, but within the directive code I'm getting alertService.alertNeeded as undefined.

我是完全新的AngularJs，所以也许我得到一些错误，但我花了整个晚上，使其工作，我仍然不知道究竟是什么的妥善解决。

I'm completely new to AngularJs, so maybe I'm getting something wrong, but I spent whole evening to make it work and I still have no idea what is the proper solution for this.

请帮帮忙！

推荐答案

您code具有 alertService 两种不同的含义。工厂定义内时，它指的是工厂本身。其他地方一样，它是指由工厂返回的对象。前进的最简单的方法是将一些丢失的方法添加到由工厂返回的对象：

Your code has two different meanings for alertService. Inside the factory definition, it refers to the factory itself. Everywhere else, it refers to the object returned by the factory. The easiest way to move forward would be to add a few missing methods to the object returned by the factory:

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

然后，改变你的指令的模板，以便它在每个周期消化调用这些函数：

Then, change your directive's template so that it calls these functions on each digest cycle:

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

这时你应该会看到警告信息。 试着在小提琴。

这篇关于服务方法的调用后AngularJs更新指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！