一句话: 大多数html标签属性和事件都有一个对应的ng指令
说明:这些指令和原生html最大的区别就是可以动态更新.比如一个div的样式用ng-class后,我们就可以随意应用css class.
1. 内置指令大全
| ng-include | 包含一个文件 |
| ng-href ng-src | 对应 href src |
| ng-disabled ng-readonly | 对应 disabled readonly |
| ng-checked ng-selected ng-options ng-true-value ng-false-value | 对应 checked select option |
| ng-class ng-style ng-class-even ng-class-odd ng-show ng-hide ng-cloak | class style, 隔行用不同样式, 元素显示与否, 加载不完全时闪烁效果 |
| ng-switch ng-if ng-repeat ng-repeat-start ng-repeat-end | 逻辑控制 元素生成与否与遍历元素 |
| ng-submit ng-click ng-dblclick ng-change ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove ng-mouseover ng-mouseup | 相应的鼠标键盘事件 |
| ng-bind ng-bind-html ng-bind-html-unsafe ng-bind-template | 绑定显示数据: 文本,半html,全html,组合模板 |
| ng-view ng-route | 路由功能 |
2. 运行结果(所有标签都有相应实例)
url: http://jimuyouyou.github.io/angular-bootstrap-rest-seed/examples/angular/3-ng-directives.html
3. 源码
1 <div>
2 <span ng-init="global.trueval=‘hello‘"></span>
3 <span ng-init="global.falseval=false"></span>
4 <span ng-init="global.array=[‘dog‘, ‘goat‘, ‘cat‘]"></span>
5 <span ng-init="global.objArray=[{name: ‘dog‘, age: 10}, {name: ‘goat‘, age: 20}, {name: ‘cat‘, age: 30}]"></span>
6
7 <hr>
8 <div>
9 <label>ng-include实例-有的浏览器可能不支持</label>
10 <div ng-include="‘partials/ng-include.html‘"></div>
11
12 <span ng-init="ni.tempalteName=‘partials/ng-include-var.html‘"></span>
13 <div ng-include="ni.tempalteName"></div>
14 </div>
15
16 <hr>
17 <div>
18 <p></p>
19 <label>ng-href ng-src实例</label><p></p>
20 <span ng-init="nh.baidu=‘www.baidu.com‘"></span>
21 <a ng-href="http://{{nh.baidu}}">ng-href百度</a><br>
22 <img ng-src="https://www.baidu.com/img/bd_logo1.png" style="width:60px;height:20px" />ng-src
23 </div>
24
25 <hr>
26 <div><p></p>
27 <label>ng-disabled ng-readonly实例</label><p></p>
28 <button ng-disabled="global.trueval">ng-disabled</button>
29 <input type="text" ng-readonly="global.trueval" placeholder="ng-readonly">
30 </div>
31
32 <hr>
33 <div><p></p>
34 <label>ng-checked ng-selected ng-options ng-true-value ng-false-value实例</label><p></p>
35 <input type="checkbox" ng-checked="global.trueval" ng-true-value="admin" ng-false-value="basic"> ng-checked ng-true-value="admin" ng-false-value="basic"
36
37 <p></p>
38 <select ng-model=‘test.name‘ ng-options="elem.value as elem.name for elem in global.objArray">
39 <option>--</option>
40 </select>ng-options
41
42 <select>
43 <option>--</option>
44 <option ng-repeat="elem in global.objArray" value="{{elem.name}}" ng-selected="elem.name==‘dog‘">
45 {{elem.age}}
46 </option>
47 </select>ng-selected
48
49 </div>
50
51 <hr>
52 <div><p></p>
53 <label>ng-class ng-style ng-class-even ng-class-odd ng-show ng-hide ng-cloak实例</label><p></p>
54 <input type="text" ng-class="{‘btn-success‘ : global.trueval, ‘btn‘: global.falseval}" ng-style="{width: ‘300px‘, height: ‘30px‘}"> ng-class ng-style <p></p>
55 <table>
56 <tr ng-repeat="elem in global.objArray" ng-class-even="‘bg-success‘" ng-class-odd="‘bg-danger‘"><td>{{elem.name}} ng-class-even ng-class-odd</td></tr>
57 </table>
58 <input type="button" ng-show="global.trueval" class="btn btn-success" value="ng-show">
59 <input type="button" ng-hide="!global.trueval" class="btn btn-primary" value="ng-hide">
60 <p ng-cloak>ng-cloak </p>
61 </div>
62
63 <hr>
64 <div><p></p>
65 <label>ng-switch ng-if ng-repeat ng-repeat-start ng-repeat-end实例</label><p></p>
66 <div ng-switch on="global.trueval">
67 <div ng-switch-when="abc">ng-switch-when abc</div>
68 <div ng-switch-default>ng-switch-default</div>
69 </div>
70 <div ng-if="global.trueval">ng-if</div>
71
72 <ul>
73 <li ng-repeat-start="elem in global.objArray">
74 <strong>{{elem.name}}</strong>
75 </li>
76 <li ng-repeat-end>{{elem.age}}</li>
77 </ul>ng-repeat-start ng-repeat-end: 从start标记的元素开始，到end标记的元素结束，作为循环体进行循环输出,可以跳出父子元素关系。
78 </div>
79
80 <hr>
81 <div><p></p>
82 <label>ng-submit ng-click ng-dblclick ng-change ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove ng-mouseover ng-mouseup实例</label>
83 <div ng-controller="EventsController">
84 <span class="bg-danger">{{currentEventName}}</span><p></p>
85 <button ng-click="ngEvents(‘ng-click‘)">ng-click</button>
86 <span ng-dblclick="ngEvents(‘ng-dblclick‘)">ng-dblclick</span>
87 <input ng-model="currentEventName" type="text" ng-change="ngEvents(‘ng-change‘)" placehodler"ng-change me"><p></p>
88 <span ng-mousedown="ngEvents(‘ng-mousedow‘)" ng-mouseenter="ngEvents(‘ng-mousedow‘)" ng-mouseleave="ngEvents(‘ng-mouseleave‘)" ng-mousemove="ngEvents(‘ng-mousemove‘)" ng-mouseover="ngEvents(‘ng-mouseover‘)" ng-mouseup="ngEvents(‘ng-mouseup‘)" >ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove ng-mouseover ng-mouseup</span>
89 </div>
90
91 <script>
92 var myApp = angular.module(‘myApp‘, []);
93 myApp.controller(‘EventsController‘, function($scope) {
94 $scope.ngEvents = function(param1) {
95 $scope.currentEventName = param1;
96 }
97 });
98 </script>
99 </div>
100
101 <hr>
102 <div ng-controller="BindController"><p></p>
103 <label>ng-bind ng-bind-html ng-bind-html-unsafe ng-bind-template实例</label><p></p>
104 <span ng-bind="nb.textval"></span> ng-bind <p></p>
105 <span ng-bind-template="{{ nb.textval }} and ng-bind-template {{ nb.htmlval }}"></span> ng-bind-template <p></p>
106 ng-bind-html ng-bind-html-unsafe需要引入sanitize文件,也就是说Angular不推荐html
107
108 <script>
109 myApp.controller(‘BindController‘, function($scope, $sce) {
110 $scope.nb = {};
111 $scope.nb.textval = ‘I am a text‘;
112 $scope.nb.htmlval = $sce.trustAsHtml(‘I am a html<strong>strong</strong> content‘);
113 });
114 </script>
115 </div>
116
117 <hr>
118 <div><p></p>
119 <label>ng-view ng-route实例</label><p></p>
120 url: <a href="http://jimuyouyou.github.io/SearchableCookbook4Coder/plugins/angular-js/ng-view-ngRoute.html">http://jimuyouyou.github.io/SearchableCookbook4Coder/plugins/angular-js/ng-view-ngRoute.html</a>
121 </div>
122 <hr><hr>
123
124 </div>
4. 项目地址
github: https://github.com/jimuyouyou/angular-bootstrap-rest-seed
时间： 2024-12-20 22:01:41