angularJS中自定义指令
学习了angularJS一周，但是大部分时间被自定义指令占用了。博主表示自学互联网好心塞的，发现问题的视觉很狭窄，这比解决问题要更难。这篇文章首先介绍了自定义，然后介绍了在使用自定义指令遇到的问题。
代码模板：
var myModule = angular.module("myModule",[]);
myModule.directive('directiveName',function(){
return{ restrict:string,
template:string,
templateUrl:string, replace:boolean,
transclude:boolean,
scope:bollean 或 object,
link:function(scope,element,attrs){ },
compile:function(element,attrs,transclude){ } ...
}
.directive('指令名', [参数1，参数2，… function(形参1’， 形参2’，…) {}])//该参数是固定的。
第一个参数是指令的名字。定义指令的名字，应该使用驼峰命名法，使用时用-连接。
第二个参数使用一个数组，这是为了防止压缩代码后转义。数组的最后一个元素是一个函数。
restrict：指定如何在模板中使用自定义指令，可取E、A、C、M中的一个或任意组合。默认值为A。
E：表示元素的名称；A：表示元素的属性；C：表示CSS中的class；M：表示注释。
元素和标签使用：
div ng-controller="InController">
<!-- inputdirct作为属性使用 -->
<div add-one="name" add-two="name" inputdirct class="div1"> </div>
</br></br>
<!-- inputdirct作为标签使用 -->
<inputdirct add-one="name" add-two="name"></inputdirct>
</div>
template：指令的内联模板；
template：指令的内联模板的url；
replace：若取值伪true，模板（template）替换指令所在的元素；若取为false，把模板（template）放在指令所在元素的内部。默认值为false。
transclude：把指令元素的子元素移到指令内联模板的内部。
scope : false：自定义指令的scope对象就是指令所在的scope对象（作用域） true：自定义指令建立了一个scope对象，并继承了外层的scope。
object：自定义指令创建了一个scope对象，不继承外层的scope，该scope与外层scope隔离。
自定义指令scope通信：通过传递属性名映射的方式把父scope中指定的属性传递给这个独立的scope。
绑定方式如下：
（1）@：单向文本绑定，传递一个字符串值。当父作用域属性改变时，隔离的scope中的属性值随着变化；当隔离的scope中的属性值改变时，父作用域的属性值不随着变化。
（2）= ：双向绑定，传递父作用域的属性，传递的数据类型可以是字符串、数组、对象等。当父作用域属性改变时，隔离的scope中的属性值会发生变化；当隔离的scope中的属性发生变化时，父作用域的属性也会发生变化。
（3）&：执行父作用预计中的函数。
分析：@和=区别
<div ng-controller="InController">
<inputdirct add-one="name" add-two="name"></inputdirct>
</div>
<script src="bower_components/angular/angular.js"></script>
<script>
var app = angular.module("App",[]);
// 控制器
app.controller('InController',['$scope',function($scope){
// $scope.inputdate = '';
$scope.name='LiShuyi';//控制器中给name赋值‘Lishuyi’，添加到属性add-one和add-two中
$scope.$watchCollection('name',function(now,old){console.log(now)});
}]);
// 自定义指令
app.directive("inputdirct",function(){
return{
restrict : 'EA',
scope:{addOne:'@',
addTwo:'='},
template:'<span>使用@单向文本绑定{{addOne}}</span></br>\
<span>使用=双向文本绑定{{addTwo}}</span>',
// 分别使用@和=引用add-one和add-two，通过浏览器的输出结果可以发现，@输出的di元素中add-one属性的值，而=输出的是在控制器中赋值的name。
}
});
compile、link：这两个选项关系到AngularJS的生命周期。
