自定义指令directive
angular.module('myApp', []).
directive('myDirective', function () {
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(...) { ... }
}
};
});
1. scope
scope的三种取值
- false（默认值）：直接使用父scope。
- true：继承父scope，子作用域scope的proto指向了父作用域scope
- 对象{ }：创建一个新的“隔离”scope，但仍可与父scope通信
隔离的scope，通常用于创建可复用的指令，也就是它不用管父scope中的model。然而虽然说是“隔离”，但通常我们还是需要让这个子scope跟父scope中的变量进行绑定。绑定的策略有3种：@：单向绑定，外部scope能够影响内部scope，但反过来不成立=：双向绑定，外部scope和内部scope的model能够相互改变&：把内部scope的函数的返回值和外部scope的任何属性绑定起来
-
false（默认值）：直接使用父scope。
比较“危险”。可以理解成指令内部并没有一个新的scope，它和指令以外的代码共享同一个scope。我们创建的指令继承了父作用域的一切属性和方法，这也使得在指令的模板中我们可以使用这些属性和方法。
因为我们将scope的属性设置为false所以，我们创建的指令继承了父作用域的一切属性和方法，这也使得在指令的模板中我们可以使用这些属性和方法。 -
true：从父作用域继承并创建一个新的作用域对象。
子作用域scope的_proto_指向了父作用域scope
内置指令ng-controller的作用，就是从父级作用域继承并创建一个新的子作用域。它会创 建一个新的从父作用域继承而来的子作用域。 -
{ }：创建一个新的“隔离”scope，当我们将scope的属性设置为{}时，我们可以做更多的事情。
AngularJS最强的大的地方之一就是它可以构建组件，无论放在哪里都是可以使用的；这所以可以做到这些，不得不归功于指令的这个属性；当我们将scope设置为{}时，意味着我们创建的一个新的与父作用域隔离的新的作用域，这使我们在不知道外部环境的情况下，就可以正常工作，不依赖外部环境。所以隔离的scope，通常用于创建可复用的指令，也就是它不用管父scope中的model。
我们使用了隔离的作用域，不代表我们不可以使用父作用域的属性和方法。我们可以通过向scope的{}中传入特殊的前缀标识符（即prefix），来进行数据的绑定。在创建了隔离的作用域，我们可以通过@,&,=引用应用指令的元素的属性。
绑定的策略有3种：@、=、&
1、@ 单项绑定的前缀标识符使用方法：在元素中使用属性，好比这样my-directive my-name="{{name}}">
注意，属性的名字要用-将两个单词连接，因为是数据的单项绑定所以要通过使用{{}}来绑定数据。
注意，父作用域中修改绑定值会影响子作用域，但子作用域修改绑定的值不影响父作用域。
2、= 双向数据绑定前缀标识符使用方法：在元素中使用属性，好比这样my-directive age="age">
注意，数据的双向绑定要通过=前缀标识符实现，所以不可以使用{{}}。
3、& 绑定函数方法的前缀标识符使用方法：在元素中使用属性，好比这样my-directive change-my-age="changeAge()">，
注意，属性的名字要用-将多个个单词连接。注意：在新创建指令的作用域对象中，使用属性的名字进行绑定时，要使用驼峰命名标准，比如下面的代码。
