标签:ng-repeat 摘要 网址 意思 rac abs 大小 efault click
项目中以前就经常用到模态框,但是一直没有时间来整理,
好在今天稍微有点时间,就来讲一下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=