angular-ui-bootstrap-modal必须要说的几个点(转)

angular-ui-bootstrap-modal必须要说的几个点

摘要: 基于angular来实现的一个bootstrap模态框,有些不得不说的地方

项目中以前就经常用到模态框,但是一直没有时间来整理,

好在今天稍微有点时间,就来讲一下angular-ui-bootstrap-modal这个功能要怎么来做,以及其中不得不提的几个点

首先还是最基础的类库引入,官方网站是提了一下版本的

https://angular-ui.github.io/bootstrap/这里给个网址可以自己看一下

然后在其中版本依赖就说了这么几个点

angular的版本要在1.4.x以上,1.5.5版本还在测试中,然后ui-bootstrap-tpls.js这个类库是在0.14.3以上,然后其他的组件要求都是在1.5.5一下就可以了

因为现在官方最新的angular版本好像是1.5.7,注意一下这个点就可以了,其他的问题应该都不大,

该怎么引入还是怎么引入

那么接下来直接看我的引入版本吧

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.0.0.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

这是我用的类库版本,当然如果你不能FQ的话,最好还是把这些类库down下来,

直接用bower就可以了

bower install angular --save
bower install angular-bootstrap -save bower install angular-animate -save bower install bootstrap --save

这里提一下,ui-bootstrap-tpls.js这个类库是在angular-bootstrap这个包里面的,然后就是版本注意一下,就不会有问题了,

ok,文件引入做好了,接下来就是做一个modal

首先还是html

<div ng-controller="ModalDemoCtrl"> <!-- 这里就是控制器的内容 ,然后直接在控制器里面插入modal的页面元素--> <script type="text/ng-template" id="myModalContent.html"> <div class="modal-header"> <h3 class="modal-title">I'm a modal!</h3> </div> <div class="modal-body"> <ul> <li ng-repeat="item in items"> <a href=

转载于:https://www.cnblogs.com/yu-709213564/p/6128090.html