Angularjs 创建一个；“应用程序范围”；角度信息系统

所以我想创建一个输出全局消息的指令

指令的要求

此指令消息可以从任何控制器更新

当消息从任何控制器更新时，视图中的指令也随之更新

删除视图后清除消息

到目前为止，我是通过创建一个指令和服务来实现这一点的。 问题是当消息从其他控制器内部更新时，Im无法更新视图

如果有人能告诉我如何进行，那就太好了。 使用$rootScope和广播怎么样

app.directive("alertMsg", ['MsgService', function(MsgService) {
        return {
            restrict: "E",
            scope: true,
            template: '{{msg}}', // this string is the html that will be placed inside the <alert-msg></alert-msg> tags.
            link: function (scope, $element, attrs) {
                scope.msg = MsgService.getAlertMsg(); //set msg to be available to the template above <alert-msg>{{msg}}</alert-msg>
                scope.$on("$destroy", function(){ //when the <alert-msg> view is destroyed clear the alert message
                    MsgService.clearAlertMsg();
                });
            }
        };
    }]);    


app.service('MsgService', function() {  
                this.alertMsg = '';
                this.getAlertMsg = function(){
                    return this.alertMsg;
                };
                this.setAlertMsg = function(string) {
                    this.alertMsg = string;
                };
                this.clearAlertMsg = function(){
                    this.alertMsg = '';
                };
            });


app.controller('NewPlateController', ['urlConfig', '$scope', '$http', '$location', 'MsgService', '$routeParams', function(urlConfig, $scope, $http, $location, MsgService, $routeParams) {
        $scope.plate = {license_plate: $routeParams.plate, state: 'default-state'};
        // create new plate via json request
        $scope.createPlate = function(){
            $http.post(urlConfig.rootUrl+"/plates.js", $scope.plate).success(function(data) { 
                $scope.plateInfo = data;
                MsgService.setAlertMsg('Plate Sucessfully Created'); //Need to update the directive to actual show this update
                $location.path('/plate/'+$scope.plateInfo.plate_id);
            // http error: display error messages
            }).error(function(data,status,headers,config) {
                $scope.errors = data;
                $('#new-plate-errors').slideDown('fast');
            });
        };
    }]);

app.directive（“alertMsg”、['MsgService'，函数（MsgService）{
返回{
限制：“E”，
范围：正确，
模板：{{msg}}'，//此字符串是将放置在标记中的html。
链接：函数（作用域、$element、属性）{
scope.msg=MsgService.getAlertMsg（）；//将msg设置为可用于{{msg}上面的模板
作用域。$on（“$destroy”，function（）{//当视图被销毁时，清除警报消息
MsgService.clearAlertMsg（）；
});
}
};
}]);    
app.service（'MsgService'，function（）{
this.alertMsg=''；
this.getAlertMsg=函数（）{
返回此.alertMsg；
};
this.setAlertMsg=函数（字符串）{
this.alertMsg=字符串；
};
this.clearAlertMsg=函数（）{
this.alertMsg=''；
};
});
app.controller（'NewPlateController'，['urlConfig'，'$scope'，'$http'，'$location'，'MsgService'，'$routeParams'，函数（urlConfig，$scope，$http，$location，MsgService，$routeParams）{
$scope.plate={license\u plate:$routeParams.plate，状态：'default state'}；
//通过json请求创建新板
$scope.createPlate=函数（）{
$http.post（urlConfig.rootUrl+“/plates.js”，$scope.plate）.success（函数（数据）{
$scope.plateInfo=数据；
MsgService.setAlertMsg（'Plate Successfully Created'）；//需要更新指令以实际显示此更新
$location.path（'/plate/'+$scope.plateInfo.plate_id）；
//http错误：显示错误消息
}).error（函数（数据、状态、标题、配置）{
$scope.errors=数据；
$（“#新板错误”）。向下滑动（“快速”）；
});
};
}]);

使用$rootscope.$emit从控制器（甚至服务）发送消息，使用$rootscope.$on在指令中接收消息

必须在指令的作用域销毁中删除侦听器，否则将导致内存泄漏

app.directive("alertMsg", ['$rootScope', function($rootScope) {
    return {
        restrict: "E",
        scope: true,
        template: '{{msg}}', // this string is the html that will be placed inside the <alert-msg></alert-msg> tags.
        link: function (scope, $element, attrs) {
            var _unregister; // store a reference to the message event listener so it can be destroyed.

            _unregister = $rootScope.$on('message-event', function (event, message) {
                scope.msg = message; // message can be value, an object, or an accessor function; whatever meets your needs.
            });

            scope.$on("$destroy", _unregister) //when the <alert-msg> view is destroyed remove the $rootScope event listener.
        }
    };
}]);

app.controller('NewPlateController', ['urlConfig', '$scope', '$http', '$location', '$rootScope', '$routeParams', function(urlConfig, $scope, $http, $location, $rootScope, $routeParams) {
    $scope.plate = {license_plate: $routeParams.plate, state: 'default-state'};
    // create new plate via json request
    $scope.createPlate = function(){
        $http.post(urlConfig.rootUrl+"/plates.js", $scope.plate).success(function(data) { 
            $scope.plateInfo = data;
            $rootScope.$emit('message-event', 'Plate Sucessfully Created'); //use $emit, not $broadcast. Only $rootscope listeners are called.

            scope.$on("$destroy", function() { // remove the message when the view is destroyed.
                $rootScope.$emit('message-event', "");
            });

            $location.path('/plate/'+$scope.plateInfo.plate_id);
        // http error: display error messages
        }).error(function(data,status,headers,config) {
            $scope.errors = data;
            $('#new-plate-errors').slideDown('fast');
        });
    };
}]);

app.directive（“alertMsg”，['$rootScope'，函数（$rootScope）{
返回{
限制：“E”，
范围：正确，
模板：{{msg}}'，//此字符串是将放置在

编辑2：我错过了删除删除视图销毁时添加的消息的要求。使用此方法，您可以使用空字符串消息在NewPlateController作用域销毁时向消息添加第二个发射

这不包括在DOM中动态添加或删除指令。为此，您可以使用一个服务来添加和删除指令标记。这就是模块类似于Ngtoos和ui的工作方式。boostrap的模式服务。使用其中一个可能更适合您想要完成的任务。
我认为您关于$rootScope和broadca的想法sting听起来不错。我在想使用$rootScope可能会更简单更干净，但我不确定如何实现它。我还会使用指令，而不是服务吗？我完全按照您提供的那样做，但不会出现任何消息，控制台中也没有错误。让我看看是否可以解决。http调用是retu吗正在成功执行发出？页面上是否已经存在警报指令，或者当有警报要显示时，您是否希望动态添加警报？如果您希望以弹出消息的形式动态显示警报，您希望使用toast通知。这是一种实现方法。是的，我已在我的主版面上尝试了该指令t和模板。此外，我已从多个位置发出。Console.log（）不在链接函数内执行。是否可以使用根作用域上的发出触发根作用域上的监视？缺少关闭）在我的原始帖子中，因此如果您复制了它，请确保更新到现在发布的代码中。要使emit trigger具有新的监视功能，您需要一个监视程序侦听该emit。您可以在模块（）中添加此“trigger”监视程序。run（）函数在应用程序启动时添加它。您的js fiddle中有几个错误，但我已经解决了。需要将$scope注入控制器，并且在$rootScope上缺少一个“；”。如您所述，$on…。修复->