如何用 Angular.js 实现一个全局通知条？

Question

显示在网页顶端那种能无视路由跳转随时显示需要的信息的。

Answer 1

路由跳转只会修改绑定ng-view(或者ui-view使用angular-router)的container 通知区域只要独立于ng-view使用ng-include引入或者直接写在index.html就好了 可以参考angular-app中notifications 很简单..

Answer 2

不知这样的思路是否可行：

1. 写一个 service，用来存放全局通知条的通知内容，或者想省事一点的话直接存到 $rootScope 里
   这个通知内容默认为 null，想要弹出通知时，就把它的内容设为一个字符串

2. 写一个 directive，这个 directive 通过 $watch 监视上面那个 service 中的值，一旦值不为 null 了，就让通知条显示出来，否则让通知条保持隐藏状态。

3. 在 ng-view 的范围外、ng-app 的范围内创建一个元素，把它和上面那个 directive 绑到一起

Answer 3

用$rootScope里面创建个变量比如

$rootScope.message = "aaa";

来存放你的消息，然后顶上的条里面直接即可，赋值的话就直接往$rootScope.message上面写

Answer 4

我比较推荐使用directive而不是注册一个service

创建一个directive， 通知的所有模板样式放到这个模板里面例如notice_tpl.html

   angular.module('demoApp', [])
.directive('noticeBox', function() {
return {
    scope:{
        display:'='
        message:'='
    },
    templateURL: 'notice_tpl.html'
};
});

然后用的时候放到html标签里面（全局的化就放到ng-view外面）,

<div notice-box message='data.message' display='data.show'></div>

通过$rootscope.data.message,传递消息内容 $rootscope.data.show, 控制是否显示

Answer 5

无视路由跳转不就是意味着把全局通知放到 ng-view 外面么？

Answer 6

1 引入标签

<div class="alert" ng-bind="alertMessage"></div>放入公共模版里面,这个封装成directive更好

通过$rootScope.alertMessage改变值

2 注册service

service内有alertSuccess，alertError,alertWarning之类方法，这些方法动态在dom添加标签

<div class="alert" ng-bind="alertMessage"></div>