素材牛VIP会员
如何用 Angular.js 实现一个全局通知条?
 he***ba  分类:Html5  人气:1313  回帖:6  发布于6年前 收藏

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

讨论这个帖子(6)垃圾回帖将一律封号处理……

Lv3 码奴
爱***丘 站长 6年前#1

我比较推荐使用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, 控制是否显示

Lv5 码农
ga***et 移动开发工程师 6年前#2

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>
Lv4 码徒
阁***起 其它 6年前#3

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

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

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

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

Lv3 码奴
那***s JS工程师 6年前#4

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

Lv5 码农
迷***文 JS工程师 6年前#5

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

Lv6 码匠
85***32 交互设计师 6年前#6

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

$rootScope.message = "aaa";

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

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取