angularJS指令系统---Directive

指令：Directive

angularJS 有一套完整的，可拓展的，用来帮助web应用开发的指令集；

在建立DOM期间，和HTML关联着的指令会被检测到，并被执行；

在angularJS中将前缀为 ng- 这种属性称之为指令，其作用就是为DOM元素调用方法，定义行为绑定数据等；

简单说：当一个angular 应用启动时，angular会遍历DOM树来解析HTML，根据指令不同，完成不同的操作；

指令属性小提示：

ng-xxx 的属性并不是标准中定义的属性，很多情况下语法校验是无法通过的；

HTML5允许拓展（自制的）的属性，以data- 开头；

在angularJS中可以使用 data-ng- 来让网页对HTML有效（两者效果都是一样的）

<hrml ng-app>
<hrml data-ng-app>

ng-app指令：

ng-app 指令用来表明一个 angularJS 应用程序；

标记在一个 angularJS 的作用范围在根对象上；

系统执行的时候会自动的执行根对象范围内的指令；

可以在一个页面创建多个 ng-app 节点（不推荐），原因：创建多个 ng-app 时，默认只能执行第一个，后面的需要进行手动引导：angular.bootstrap()

标记的范围尽可能小，性能优化

多个 ng-app 的使用：

<div ng-app="myAppOne" ng-controller="myAppOneController">
<input type="button" value="按钮一" ng-click="show()">
</div>
<div ng-app="myAppTwo" ng-controller="myAppTwoController">
<input type="button" value="按钮二" ng-click="show()">
</div>
</body>
<script type='text/javascript' src='bower_components/angular/angular.js'></script>
<script type="text/javascript">
var myAppOne = angular.module('myAppOne',[]);
myAppOne.controller('myAppOneController',['$scope',function($scope){
    $scope.show = function(){console.log('1');};
}]);
var myAppTwo = angular.module('myAppTwo',[]);
myAppTwo.controller('myAppTwoController',['$scope',function($scope){
    $scope.show = function(){console.log('2');};
}]);
//手动引导让第二个div被myAppTwo管理
angular.bootstrap(document.querySelector('[ng-app="myAppTwo"]'),['myAppTwo']);
//上面这种方法，可以解决，但是angularJS不推荐，推荐使用的是：
//创建一个新模块，去管理其他的模块 接下来将ng-app="myApp"
angular.module('myApp',['myAppOne'],['myAppTwo']);
</script>

ng-bind指令：

作用：将作用域（scope）中的值绑定到元素的 innerHTMl 中，其效果会比通过表达式绑定的方式会更加友好：

如果绑定的内容有HTML，就会自动转义：

<div ng-app ng-init="dataName='张三'">
    <h1 ng-bind="dataName"></h1>
</div>

如果要绑定HTMl，需要引入 angular-sanitize 这个包：

即使引入这个包，还是会有有问题：

原因：

引进了的文件，如果想要用它提供的模块，就必须让我们的模块去依赖它里面的模块，才能使用它的模块；

如果直接写ng-app，是直接使用angularjs提供的一个默认的模块，这个模块是没有去依赖这个东西的，所以不会生效；

这样就可以生效：

<div ng-app ng-init="dataName='<span>love</span>'">
    <h1 ng-bind-html="dataName"></h1>
</div>
</body>
<script type='text/javascript' src='bower_components/angular/angular.js'></script>
<script type="text/javascript" src="bower_components/angular/angular-sanitize.js"></script>

ng-cloak指令：

ng-cloak指令用于在AngularJS 应用在加载时防止angularJS代码未加载玩而出现的问题；

angularJS应用在加载时，文档可能会由于angularJS代码未加载完而出现显示angularJS代码，进而会有闪烁的效果，ng-clock指令就是为了阻止该问题的发生

闪一下的问题，除了可以用ng-bind，但是这个属性，比较适用于一两个元素，如果元素比较多的情况就可以是以使用ng-cloak：
执行机制：当angular在执行的过程中，会在这个元素上默认保持不动，angular在执行完之后，会自动移除这个属性；

ng-show / ng-hide 指令：

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

使用这个做一个遮罩层的显示隐藏：

<style type="text/css">
div.shadow{background-color: rgba(0,0,0,0.5); position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;}
</style>
<div class="shadow" ng-app="myApp" ng-show="loading" ng-controller="myAppController"></div>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller('myAppController',['$scope','$timeout',function($scope,$timeout){
    $scope.loading = true;
    $timeout(function(){
        $scope.loading = false;
    },3000);
}]);
</script>

ng-if指令：

决定一个元素是否存在；ng-if = "true/false";

ng-show : 元素是否显示；

ng-hide：元素是否隐藏；

ng-if：元素是否存在；

ng-href / ng-src 指令：

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

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

ng-switch指令：

ng-switch指令根据表达式显示或隐藏对应的部分。

对应的子元素使用 ng-switch-when 指令，如果匹配选择显示，其他未匹配的则会被移除；

你可以通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示；

ng-switch指令的效果：
ng-switch需要配合 ng-switch-when和ng-switch-default来使用：

<div ng-app>
    <select ng-model="myVar">
        <option value='jd'>www.jd.com</option>
        <option value='taobao'>www.taobao.com</option>
        <option value='baidu'>www.baidu.com</option>
    </select>
    <div ng-switch="myVar">
        <div ng-switch-when="jd">www.jd.com</div>
        <div ng-switch-when="taobao">www.taobao.com</div>
        <div ng-switch-when="baidu">www.baidu.com</div>
        <div ng-switch-default="baidu">请选择</div>
    </div>
</div>

其他常用指令：

ng-cheched : 单选 / 复选是否被选中；

ng-disabled : 是否禁用；

ng-readonly : 是否只读；

ng-selected : 是否选中；

<div ng-app>
    <!-- 都不选中 -->
    <input type="checkbox" ng-model="true">
    <input type="checkbox" ng-checked="true">
</div>

实现全选和全不选：

<div ng-app>
    <p><input type="checkbox" ng-model="checked">全选或者全不选</p>
    <li>选项0<input type="checkbox" ng-checked="checked"></li>
    <li>选项0<input type="checkbox" ng-checked="checked"></li>
    <li>选项0<input type="checkbox" ng-checked="checked"></li>
    <li>选项0<input type="checkbox" ng-checked="checked"></li>
    <li>选项0<input type="checkbox" ng-checked="checked"></li>
    <li>选项0<input type="checkbox" ng-checked="checked"></li>
</div>

常用的事件指令：

ng-blur : 失去焦点；

ng-change : 发生改变；

ng-copy : 拷贝完成；

ng-click : 单击；

ng-dbclick : 双击；

ng-focus : 获得焦点；

ng-submit : 表单提交；

angularJS 的指令系统中还有一块是：自定义指令；（稍微麻烦，在此不做赘述）