Angular-UI Bootstrap组件实现警报功能

前端之家收集整理的这篇文章主要介绍了Angular-UI Bootstrap组件实现警报功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Angular-UI Bootstrap提供了许多组件,从流行的的Bootstrap项目移植到Angular 指令(显著的减少了代码量)。如果你计划在Angular应用中使用Bootstrap组件,我建议细心检查。话虽如此,直接使用Bootstrap,应该也是可以工作的。

Angular controller可以共享service的代码。警报就是把service代码共享到controller的很好用例之一。

Angular-UI Bootstrap文档提供了下面的例子:

view

controller

$scope.addAlert = function() {
$scope.alerts.push({msg: "Another alert!"});
};

$scope.closeAlert = function(index) {
$scope.alerts.splice(index,1);
};
}

鉴于我们要在app中的不同的控制器中创建警报,并且跨控制器的代码不好引用,我们将要把它移到service中。

alertService

view

最后,我们需要将alertService's中的closeAlert()方法绑定到$globalScope。

controller

我不完全赞同这种全局绑定,我希望的是直接从警报指令中的close data属性调用service方法,我不清楚为什么不这样来实现。

现在创建一个警报只需要从你的任何一个控制器中调用alertService.add()方法

总结

以上所述是小编给大家介绍的Angular-UI Bootstrap组件实现警报功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Bootstrap相关文章