Angularjs 创建可复用组件实例代码
AngularJS框架可以用Service和Directive降低开发复杂性。这个特性非常适合用于分离代码，创建可测试组件，然后将它们变成可重用组件。
Directive是一组独立的JavaScript、HTML和CSS，它们封装了一个特定的行为，它将成为将来创建的Web组件的组成部分，我们可以在各种应用中重用这些组件。在创建之后，我们可以直接通过一个HTML标签、自定义属性或CSS类、甚至可以是HTML注释，来执行一个Directive。
这一篇教程将介绍如何创建一个‘自定义步长选择'Directive，它可以作为一个可重用输入组件。本文不仅会介绍Directive的一般创建过程，还会介绍输入控件验证方法，以及如何使用ngModelController无缝整合任意表单，从而利用AngularJS表单的现有强大功能。
直接上代码：
html：
<!--lang:html-->
<bodyng-app="demo"ng-controller="DemoController">
<formname="form">
Modelvalue:<inputtype="text"size="3"ng-model="rating"><br>
Minvalue:<inputtype="text"size="3"ng-model="minRating"><br>
Maxvalue:<inputtype="text"size="3"ng-model="maxRating"><br>
Formhasbeenmodified:{{form.$dirty}}<br>
Formisvalid:{{form.$valid}}
<hr><divmin="minRating"max="maxRating"ng-model="rating"rn-stepper></div></form></body>
js：
<!--lang:js-->
angular.module(‘demo‘,[
‘revolunet.stepper‘
])
.controller(‘DemoController‘,function($scope){
$scope.rating=42;
$scope.minRating=40;
$scope.maxRating=50;
});
rn-stepper最简结构
<!--lang:js-->
//wedeclareamodulenameforourprojet,anditsdependencies(none)
angular.module(‘revolunet.stepper‘,[])
//declareournaïvedirective
.directive(‘rnStepper‘,function(){
return{
//canbeusedasattributeorelement
restrict:‘AE‘,
//whichmarkupthisdirectivegenerates
template:‘<button>-</button>‘+
‘<div>0</div>‘+
‘<button>+</button>‘
};
});
现在directivernStepper已经有了一个简单的雏形了。
可以有如下两种试用方法：
<divrn-stepper></div>
<rn-stepper></rn-stepper>
demo:http://jsfiddle.net/revolunet/n4JHg/
添加内部动作
直接上代码：
<!--lang:js-->
.directive(‘rnStepper‘,function(){
return{
restrict:‘AE‘,
//declarethedirectivescopeasprivate(andempty)
scope:{},
//addbehaviourtoourbuttonsanduseavariablevalue
template:
‘<buttonng-click="decrement()">-</button>‘+
‘<div>{{value}}</div>‘+
‘<buttonng-click="increment()">+</button>‘,
//thisfunctioniscalledoneachrn-stepperinstanceinitialisation
//wejustdeclarewhatweneedintheabovetemplate
link:function(scope,iElement,iAttrs){
scope.value=0;
scope.increment=function(){
scope.value++;
};
scope.decrement=function(){
scope.value--;
};
}
};
});
我们在template中，分别给两个button添加了click事件响应，在link方法中实现了响应的方法。
这里的scope是一个privatescope，其作用域仅限rnStepper这个directive。
demo：http://jsfiddle.net/revolunet/A92Aw/
与外部世界（外部作用域）的交互
直到上面为止，我们的rnStepper都是自己跟自己玩，并没有跟外部作用域进行一些交互。
下面我们将添加一个数据绑定，使rnStepper与外部世界建立联系。
直接上代码：
<!--lang:js-->
scope:{
value:‘=ngModel‘
}
我们在scope中添加了一组键值对，这样，会自动建立内部变量value与外部属性ngModel的联系。
这里的=代表的意思是双向绑定（doubledata-binding）。
什么叫双向绑定?
即：当value发生改变，那么ngModel也会发生改变，反之亦然。
在我们的这个demo中，看下面这行代码：
<!--lang:js-->
<divrn-stepperng-model="rating"></div>
这里的意思就是：directivernStepper的内部变量value与外部scope中的rating建立了双向数据绑定。
demo:http://jsfiddle.net/revolunet/9e7Hy/
让我们组件更加友好
直接上代码：
<!--lang:js-->
.directive(‘rnStepper‘,function(){
return{
//restrictandtemplateattributesarethesameasbefore.
//wedon‘tneedanymoretobindthevaluetotheexternalngModel
//aswerequireitscontrollerandthuscanaccessitdirectly
scope:{},
//the‘require‘propertysaysweneedangModelattributeinthedeclaration.
//thisrequiremakesa4thargumentavailableinthelinkfunctionbelow
require:‘ngModel‘,
//thengModelControllerattributeisaninstanceofanngModelController
//forourcurrentngModel.
//ifwehadrequiredmultipledirectivesintherequireattribute,this4th
//argumentwouldgiveusanarrayofcontrollers.
link:function(scope,iElement,iAttrs,ngModelController){
//wecannowuseourngModelControllerbuiltinmethods
//thatdotheheavy-liftingforus
//whenmodelchange,updateourview(justupdatethedivcontent)
ngModelController.$render=function(){
iElement.find(‘div‘).text(ngModelController.$viewValue);
};
//updatethemodelthentheview
functionupdateModel(offset){
//call$parserspipelinethenupdate$modelValue
ngModelController.$setViewValue(ngModelController.$viewValue+offset);
//updatethelocalview
ngModelController.$render();
}
//updatethevaluewhenuserclicksthebuttons
scope.decrement=function(){
updateModel(-1);
};
scope.increment=function(){
updateModel(+1);
};
}
};
});
这里，我不在需要内部变量value了。因为我们在link方法中已经拿到了ngModelController的引用，这里的ngModelController.$viewValue其实就是前面例子中的value。
但是我们又添加了另外一组键值对require:‘ngModel‘。
我们使用了两个新的API：
ngModelController.$render:在ngModel发生改变的时候框架自动调用，同步$modelValue和$viewValue，即刷新页面。
ngModelController.$setViewValue：当$viewValue发生改变时，通过此方法，同步更新$modelValue。
demo:http://jsfiddle.net/revolunet/s4gm6/
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！