标签：可扩展 元素 程序 web 数据绑定 als 重复 键值 ali
AngularJS 有一套完整的、可扩展的、用来帮助 Web 应用开发的指令集
在 DOM 编译期间，和 HTML 关联着的指令会被检测到，并且被执行
在 AngularJS 中将前缀为 ng- 这种属性称之为指令，其作用就是为 DOM 元素调用方法、定义行为绑定数据等
简单说：当一个 Angular 应用启动，Angular 就会遍历 DOM 树来解析 HTML，根据指令不同，完成不同操作
注意：HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
二者效果相同。
ng-app指令用来标明一个AngularJS应用程序
标记在一个AngularJS的作用范围的根对象上
系统执行时会自动的执行根对象范围内的其他指令
可以在同一个页面创建多个ng-app节点
ng-repeat指令用来编译一个数组重复创建当前元素，如
1 <ul class="messages"> 2 3 <li ng-repeat="item in messages track by $index"> 4 5 {{item}} 6 7 </li> 8 9 </ul>
ng-class指令可以设置一个键值对，用于决定是否添加一个特定的类名，键为class名，值为bool类型表示是否添加该类名
1 <ul class="messages"> 2 3 <li ng-repeat="item in messages track by $index" ng-class="{red:item.read}"> 4 5 {{item.content}} 6 7 </li> 8 9 </ul>
ng-show/ng-hide指令会根据属性值去确定是否展示当前元素，例如ng-show=false则不会展示该元素
1 <ul class="messages"> 2 3 <li ng-repeat="item in messages track by $index" ng-show="item.read"> 4 5 {{item.content}} 6 7 </li> 8 9 </ul>
ng-link/ng-src指令用于解决当链接类型的数据绑定时造成的加载BUG，如
1 <!-- 浏览器在解析HTML时会去请求{{item.url}}文件 --> 2 3 <img src="{{item.url}}"> 4 5 <!-- 可以使用ng-src解决该问题 --> 6 7 <img ng-src="{{item.url}}">
ng-model
ng-class
ng-show/ng-hide/ng-if
ng-click
ng-link/ng-src
AngularJS中可以通过代码自定义指令：
1 myModule.directive(‘hello‘, function() { 2 3 return { 4 5 restrict: ‘E‘, 6 7 template: ‘<h1>Hello world</h1>‘, 8 9 replace: true 10 11 }; 12 13 }); 14 15 myApp.directive("ngHover", function() { 16 17 return function(scope, element, attrs) { 18 19 element.bind("mouseenter", function() { 20 21 element.css("background", "yellow"); 22 23 }); 24 25 element.bind("mouseleave", function() { 26 27 element.css("background", "none"); 28 29 }); 30 31 } 32 33 });
标签：可扩展 元素 程序 web 数据绑定 als 重复 键值 ali
原文地址：https://www.cnblogs.com/le220/p/8709587.html
