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

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

已邀请:

1 引入标签



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


<code>通过$rootScope.alertMessage改变值
</code>


2 注册service



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



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

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



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



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


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



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


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

lvzq2016

赞同来自: illutomato zjq19921101

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




  1. 写一个 service,用来存放全局通知条的通知内容,或者想省事一点的话直接存到 $rootScope 里

    这个通知内容默认为 null,想要弹出通知时,就把它的内容设为一个字符串


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


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


commaskh5

赞同来自:

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

cgj1024

赞同来自:

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

bb32601229

赞同来自:

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



$rootScope.message = "aaa";



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

要回复问题请先登录注册