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 的指令系统中还有一块是：自定义指令；（稍微麻烦，在此不作赘述）