Angular - 指令

前言

使用指令的优势在于，我们无需太多关心指令的内部实现（当给 Angular 应用添加所需指令后，Angular 内部会自行编译和运行所有指令），只需把重点放在如何使用指令上即可。

对于指令，我们需要了解一下几个问题：

什么是指令？
如何创建指令？
指令是如何编译和运行的？

什么是指令?

指令就是 AngularJS 扩展具有自定义功能的 HTML 元素的途径，指令又分为内置指令和自定义指令。

内置指令

AngularJS 提供了一系列的内置指令。其中一些指令重载了原生 HTML 元素，比如：
和标签，当在 HTML 中使用标签时，并不一定可以明确看出是否在使用指令。

基础 ng 属性指令

布尔属性

根据 HTML 标准的定义，布尔属性代表了 true 或 false。当这个属性出现时即为 true，未出现为 false。AngularJS 提供了一组布尔属性，通过表达式的值来判断是否在元素上插入或移除该属性。

ng-disabled
使用 ng-disabled 可以对 disabled 属性进行绑定。
ng-readonly
使用 ng-readonly 可以对 readonly 属性进行绑定。
ng-checked
使用 ng-checked 可以对 checked 属性进行绑定。
ng-selected
使用 ng-selected 可以对 option 标签中的 selected 属性进行绑定。

  
        
        
        
        
        ng-checked = true
        ng-checked = false

angular.module('myApp', [])
        .controller('MyApp', ['$scope', function ($scope) {
            $scope.isDisabled = true;
            $scope.isReadonly = true;
            $scope.isChecked = true;
            $scope.isSelected = true;
        }])

注：不是将属性值设为 true 或 false，而是该属性是否出现。

类布尔属性

ng-href 、ng-src 等属性虽然不是标准的 HTML 布尔属性，但是由于行为相似，所以 AngularJS 是和布尔属性同等对待的。

ng-href
当 url 为动态绑定时，应使用 ng-href 代替 href，AngularJS 会在链接生效后再执行点击行为。
ng-src
当 src 地址为动态绑定时，应使用 ng-src 代替 src，AngularJS 会告诉浏览器，在 ng-src 对应的表达式生效之前不要加载图像。

在指令中使用子作用域

ng-app 和 ng-controller 是特殊的指令，因为他们会修改嵌套在它们内部的指令的作用域。

ng-app
任何具有 ng-app 属性的 DOM 元素将会被标记为 $rootScope（$rootScope 是作用域链的起始点，任何嵌套在 ng-app 内的指令都会继承它）的起始点。
注：如果需要在一个页面中放置多个 AngularJS应用，需要手动引导应用。
ng-controller
在 DOM 元素上放置一个控制器，为嵌套在其中的指令创建一个子作用域，避免将所有操作和模型都定义在 $rootScope 上。
ng-controller 接收一个必备参数 expression（一个 AngularJS 表达式）。
以下内置指令具有同样的特性：
ng-include
使用 ng-include 可以加载、编译并包含外部 HTML 片段到当前应用中。
ng-switch
ng-switch 和 ng-switch-when 及 on="propertyName" 一起使用，可以在 propertyName 发生变化时渲染不同指令到视图中。



    默认显示
    满足条件显示

ng-view
ng-view 用来设置将被路由管理和放置在 HTML 中的视图的位置。
ng-if
ng-if 可以根据表达式的值在 DOM 中生成或移除一个元素。
ng-repeat
ng-repeat 用来遍历一个集合或为集合中的每个元素生成一个模板实例。

$index：遍历索引（0 ~ length - 1）。
$first：当元素为遍历的第一个时值为 true。
$middle：当元素处于第一个和最后一个之间时值为 true。
$last：当元素为遍历的最后一个时值为 true。
$even：当 $index 的值为偶数是值为 true。
$odd：当 $index 的值为奇数是值为 true。

.even {
    background: #abcdef;
}
.odd {
    background: #eee;
}
.first {
    background: #ff0;
}
.last {
    background: #f00;
}

{{$index}}

ng-init
ng-init 用来设置指令被调用时的内部作用域的初始状态。
{{ }}
{{ }} 是 AngularJS 内置的模板语法，在 $scope 和视图之间创建绑定，$scope 变化时，视图就会随之自动更新。
注： {{ }} 实际上是 ng-bind 的简略形式，但在屏幕可视区内使用 {{ }} 会导致页面加载时未渲染的元素发生闪烁，用 ng-bind 可以避免这个问题。
ng-bind
同 {{ }}。
ng-cloak
除了使用 ng-bind 来避免闪烁外，还可以在含有 {{ }} 的元素上使用 ng-cloak 指令。
ng-bind-template
同 ng-bind 类似，ng-bind-template 用来在视图中绑定多个表达式。

ng-model
ng-model 用来将表单控件同包含它们的作用域中的属性进行绑定。
ng-show / ng-hide
ng-show 和 ng-hide 是通过 CSS 控制元素的显隐（ng-if 则是通过添加或移除 dom）。
ng-change
在表单输入发生变化时触发。需要与 ng-model 一起使用。
ng-form
ng-form 用来在一个表单内部嵌套另一个表单。普通的 HTML 标签不允许嵌套，但是 ng-form 可以（所以，只有内部所有子表单都合法时，外部表单才合法）。
下列 CSS 类会根据表单的验证状态自动设置：

表单合法时设置 ng-valid
表单不合法时设置 ng-invalid
表单未进行修改时设置 ng-pristion
表单进行过修改时设置 ng-dirty

input {
    margin-bottom: 10px;
}
input.ng-invalid {
    border: 1px solid red;
}
input.ng-valid {
    border: 1px solid green;
}

angular.module('myApp', [])
    .controller('FormCtrl', function($scope) {
    $scope.fields = [
        {placeholder: '请输入用户名', isRequired: true},
        {placeholder: '请输入密码', isRequired: true},
        {placeholder: '请输入邮箱(选填)', isRequired: false}
    ];
    $scope.submitForm = function() {
        alert("it works!");
    };
});

ng-click
ng-click 用来指定元素被点击是所触发的事件。
ng-select
ng-select 用来将数据同 HTML 的 Winner：{{item.name}}

angular.module('directive', []) .controller('Directive', Directive); Directive.$inject = ['$scope']; function Directive ($scope) { $scope.list = [ { id: 1, name: 'player1' }, { id: 2, name: 'player2' }, { id: 3, name: 'player3' } ]; }

angular.module('directive', []) .directive('myDirective', myDirective); function myDirective () { return { restrict: String, priority: Number, terminal: Boolean, template: String or Template Function: function (tElement, tAttrs) {}, templateUrl: String, replace: Boolean or String, scope: Boolean or Object, transclude: Boolean, controller: String or function (scope, element, attrs, transclude, otherInjectables) {}, controllerAs: String, require: String, link: function (scope, iElement, iAttrs) {}, compile: // 返回一个对象或连接函数 function (tElement, tAttrs, transclude) { return { pre: function (scope, iElement, iAttrs, controller) {}, post: function (scope, iElement, iAttrs, controller) {} } // 或者 return function postLink () {} } } }