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

问题描述

我正在尝试创建可重复使用的警报服务，我只需:

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

我的代码看起来并不完全一样，但我只是想展示我想要做什么:我想从另一个控制器调用 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 方法之后设置了值，但是在指令代码中，我将 alertService.alertNeeded 设为 undefined.

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.

请帮忙！

推荐答案

您的代码对于 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;
            }
        }
}])

然后您应该会看到警告消息.试一试.

Then you should see your warning message. Try it in a fiddle.

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