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/
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!