AngularJS 基础3

指令（Directive）：
AngularJS有一套完整的、可扩展的、用来帮助Web应用开发的指令集
在DOM编译期间，和HTML关联着的指令会被检测到，并且被执行
在AngularJS中将前缀为ng-这种属性称之为指令，其作用就是为DOM元素调用方法、定义行为绑定数据等
简单说：当一个Angular.js应用启动，Angular编译器就会遍历DOM树来解析HTML，根据指令不同，完成不同操作
指令提示：1：HTML5 允许扩展的（自制的）属性，以 data- 开头。
2：AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
3:二者效果相同。
ng-app 指令:
1:ng-app指令用来标明一个AngularJS应用程序
2:标记在一个AngularJS的作用范围的根对象上
3:系统执行时会自动的执行根对象范围内的其他指令
4:可以在同一个页面创建多个ng-app节点实现模块化开发
ng-repeat 指令: ng-repeat指令用来编译一个数组重复创建当前元素，如

<ul class="messages">
    <li ng-repeat="item in messages track by $index">
        {{item}}
    </li>
</ul>

ng-class 指令:ng-class指令可以设置一个键值对，用于决定是否添加一个特定的类名，键为class名，值为bool类型表示是否添加该类名

<ul class="messages">
    <li ng-repeat="item in messages track by $index" ng-class="{red:item.read}">
        {{item.content}}
    </li>
</ul>

ng-show/ng-hide 指令:ng-show/ng-hide指令会根据属性值去确定是否展示当前元素，例如ng-show=false则不会展示该元素
ng-if是指是否存在DOM元素

<ul class="messages">
    <li ng-repeat="item in messages track by $index" ng-show="item.read">
        {{item.content}}
    </li>
</ul>

ng-link/ng-src 指令:ng-link/ng-src指令用于解决当链接类型的数据绑定时造成的加载BUG，如

<!-- 浏览器在解析HTML时会去请求{{item.url}}文件 -->
<img src="{{item.url}}">
<!-- 可以使用ng-src解决该问题 -->
<img ng-src="{{item.url}}">

自定义指令:

myModule.directive('hello', function() {
    return {
        restrict: 'E',
        template: '<h1>Hello world</h1>',
        replace: true
    };
});
myApp.directive("ngHover", function() {
    return function(scope, element, attrs) {
        element.bind("mouseenter", function() {
            element.css("background", "yellow");
        });
        element.bind("mouseleave", function() {
            element.css("background", "none");
        });
    }
});

其他常用指令:

ng-model 
ng-show/ng-hide/ng-if
ng-click
ng-link/ng-src