好资源导航 » 文章资讯 » Angular-UI Bootstrap组件实现警报功能

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

2023-09-10 07:26:06 248

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

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

Angular-UIBootstrap文档提供了下面的例子：

view


{{alert.msg}}
AddAlert

controller

functionAlertDemoCtrl($scope){
$scope.alerts=[
{type:'error',msg:'Ohsnap!Changeafewthingsupandtrysubmittingagain.'},
{type:'success',msg:'Welldone!Yousuccessfullyreadthisimportantalertmessage.'}
];

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

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

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

alertService

'usestrict';
/*services.js*/
//don'tforgettodeclarethisservicemoduleasadependencyinyourmainappconstructor!
varappServices=angular.module('appApp.services',[]);
appServices.factory('alertService',function($rootScope){
varalertService={};
//createanarrayofalertsavailableglobally
$rootScope.alerts=[];
alertService.add=function(type,msg){
$rootScope.alerts.push({'type':type,'msg':msg});
};
alertService.closeAlert=function(index){
$rootScope.alerts.splice(index,1);
};
returnalertService;
});

view


{{alert.msg}}

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

controller

functionRootCtrl($rootScope,$location,alertService){
$rootScope.changeView=function(view){
$location.path(view);
}
//rootbindingforalertService
$rootScope.closeAlert=alertService.closeAlert;
}
RootCtrl.$inject=['$scope','$location','alertService'];

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

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

functionArbitraryCtrl($scope,alertService){
alertService.add("warning","Thisisawarning.");
alertService.add("error","Thisisanerror!");
}

总结

以上所述是小编给大家介绍的Angular-UIBootstrap组件实现警报功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐