引用地址:http://camnpr.com/javascript/1651.html
一句话说明区别:ui-bootstrap-tpls.min.js == (ui-bootstrap.min.js + html templates)
如果,你只在项目中选择了:ui-bootstrap.min.js。那么:你也将需要提供您自己的HTML模板。
否则的话,你将会看到类似这样的错误:
03 |
at Error (<anonymous>) |
接下来说一下:ui-bootstrap-tpls.min.js 这里:tpls的意思就是这个js文件包含模板
那么这个js文件使用的方法是:
ui-bootstrap.js
01 |
angular.module("ui.bootstrap", |
02 |
["ui.bootstrap.transition", |
03 |
"ui.bootstrap.collapse", |
04 |
"ui.bootstrap.accordion", |
06 |
"ui.bootstrap.bindHtml", |
07 |
"ui.bootstrap.buttons", |
08 |
"ui.bootstrap.carousel", |
09 |
"ui.bootstrap.position", |
10 |
"ui.bootstrap.datepicker", |
11 |
"ui.bootstrap.dropdownToggle", |
13 |
"ui.bootstrap.pagination", |
14 |
"ui.bootstrap.tooltip", |
15 |
"ui.bootstrap.popover", |
16 |
"ui.bootstrap.progressbar", |
17 |
"ui.bootstrap.rating", |
19 |
"ui.bootstrap.timepicker", |
20 |
"ui.bootstrap.typeahead"]); |
21 |
angular.module('ui.bootstrap.transition', |
ui-bootstrap-tpls.js(你可以清晰的看到有模板文件的定义,这就是奥妙所在,屁~~)
01 |
angular.module("ui.bootstrap", |
03 |
"ui.bootstrap.transition", |
04 |
"ui.bootstrap.collapse", |
05 |
"ui.bootstrap.accordion", |
07 |
"ui.bootstrap.bindHtml", |
08 |
"ui.bootstrap.buttons", |
09 |
"ui.bootstrap.carousel", |
10 |
"ui.bootstrap.position", |
11 |
"ui.bootstrap.datepicker", |
12 |
"ui.bootstrap.dropdownToggle", |
14 |
"ui.bootstrap.pagination", |
15 |
"ui.bootstrap.tooltip", |
16 |
"ui.bootstrap.popover", |
17 |
"ui.bootstrap.progressbar", |
18 |
"ui.bootstrap.rating", |
20 |
"ui.bootstrap.timepicker", |
21 |
"ui.bootstrap.typeahead"]); |
23 |
angular.module("ui.bootstrap.tpls", |
24 |
["template/accordion/accordion-group.html", |
25 |
"template/accordion/accordion.html", |
26 |
"template/alert/alert.html", |
27 |
"template/carousel/carousel.html", |
28 |
"template/carousel/slide.html", |
29 |
"template/datepicker/datepicker.html", |
30 |
"template/datepicker/popup.html", |
31 |
"template/modal/backdrop.html", |
32 |
"template/modal/window.html", |
33 |
"template/pagination/pager.html", |
34 |
"template/pagination/pagination.html", |
35 |
"template/tooltip/tooltip-html-unsafe-popup.html", |
36 |
"template/tooltip/tooltip-popup.html", |
37 |
"template/popover/popover.html", |
38 |
"template/progressbar/bar.html", |
39 |
"template/progressbar/progress.html", |
40 |
"template/rating/rating.html", |
41 |
"template/tabs/tab.html", |
42 |
"template/tabs/tabset-titles.html", |
43 |
"template/tabs/tabset.html", |
44 |
"template/timepicker/timepicker.html", |
45 |
"template/typeahead/typeahead-match.html", |
46 |
"template/typeahead/typeahead-popup.html"]); |
47 |
angular.module('ui.bootstrap.transition', |
例如: template/alert/alert.html
1 |
angular.module("template/alert/alert.html", []).run(["$templateCache", function($templateCache) { |
2 |
$templateCache.put("template/alert/alert.html", |
3 |
"<div class='alert' ng-class='type && \"alert-\" + type'>\n" + |
4 |
" <button ng-show='closeable' type='button' class='close' ng-click='close()'>×</button>\n"+ |
5 |
" <div ng-transclude></div>\n" + |