Angular-UI Bootstrap组件实现警报功能
程序员文章站
2022-04-09 12:48:56
angular-ui bootstrap提供了许多组件,从流行的的bootstrap项目移植到angular 指令(显著的减少了代码量)。如果你计划在angular应用中使...
angular-ui bootstrap提供了许多组件,从流行的的bootstrap项目移植到angular 指令(显著的减少了代码量)。如果你计划在angular应用中使用bootstrap组件,我建议细心检查。话虽如此,直接使用bootstrap,应该也是可以工作的。
angular controller可以共享service的代码。警报就是把service代码共享到controller的很好用例之一。
angular-ui bootstrap文档提供了下面的例子:
view
<div ng-controller="alertdemoctrl"> <alert ng-repeat="alert in alerts" type="alert.type" close="closealert($index)">{{alert.msg}}</alert> <button class='btn' ng-click="addalert()">add alert</button> </div>
controller
function alertdemoctrl($scope) { $scope.alerts = [ { type: 'error', msg: 'oh snap! change a few things up and try submitting again.' }, { type: 'success', msg: 'well done! you successfully read this important alert message.' } ]; $scope.addalert = function() { $scope.alerts.push({msg: "another alert!"}); }; $scope.closealert = function(index) { $scope.alerts.splice(index, 1); }; }
鉴于我们要在app中的不同的控制器中创建警报,并且跨控制器的代码不好引用,我们将要把它移到service中。
alertservice
'use strict'; /* services.js */ // don't forget to declare this service module as a dependency in your main app constructor! var appservices = angular.module('appapp.services', []); appservices.factory('alertservice', function($rootscope) { var alertservice = {}; // create an array of alerts available globally $rootscope.alerts = []; alertservice.add = function(type, msg) { $rootscope.alerts.push({'type': type, 'msg': msg}); }; alertservice.closealert = function(index) { $rootscope.alerts.splice(index, 1); }; return alertservice; });
view
<div> <alert ng-repeat="alert in alerts" type="alert.type" close="closealert($index)">{{ alert.msg }}</alert> </div>
最后,我们需要将alertservice's中的closealert()方法绑定到$globalscope。
controller
function rootctrl($rootscope, $location, alertservice) { $rootscope.changeview = function(view) { $location.path(view); } // root binding for alertservice $rootscope.closealert = alertservice.closealert; } rootctrl.$inject = ['$scope', '$location', 'alertservice'];
我不完全赞同这种全局绑定,我希望的是直接从警报指令中的close data属性中调用service方法,我不清楚为什么不这样来实现。
现在创建一个警报只需要从你的任何一个控制器中调用alertservice.add()方法。
function arbitraryctrl($scope, alertservice) { alertservice.add("warning", "this is a warning."); alertservice.add("error", "this is an error!"); }
总结
以上所述是小编给大家介绍的angular-ui bootstrap组件实现警报功能,希望对大家有所帮助
推荐阅读
-
bootstrap fileinput实现文件上传功能
-
使用vue2.0如何实现前端星星评分功能组件
-
spring cloud config和bus组件实现自动刷新功能
-
EasyNVR摄像机网页无插件直播方案H5前端构建之:bootstrap弹窗功能的实现方案与代码
-
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
-
bootstrap-table.js增加跳转到xx页功能实现方法
-
java组件SmartUpload和FileUpload实现文件上传功能
-
Java实现的可选择及拖拽图片的面板功能【基于swing组件】
-
Android组件实现列表选择框功能
-
Android高级界面组件之拖动条和评星条的功能实现