Angularjs 创建可复用组件实例代码
angularjs框架可以用service和directive降低开发复杂性。这个特性非常适合用于分离代码,创建可测试组件,然后将它们变成可重用组件。
directive是一组独立的javascript、html和css,它们封装了一个特定的行为,它将成为将来创建的web组件的组成部分,我们可以在各种应用中重用这些组件。在创建之后,我们可以直接通过一个html标签、自定义属性或css类、甚至可以是html注释,来执行一个directive。
这一篇教程将介绍如何创建一个‘自定义步长选择' directive,它可以作为一个可重用输入组件。本文不仅会介绍directive的一般创建过程,还会介绍输入控件验证方法,以及如何使用ngmodelcontroller无缝整合任意表单,从而利用angularjs表单的现有强大功能。
直接上代码:
html:
<!-- lang: html --> <body ng-app="demo" ng-controller="democontroller"> <form name="form" > model value : <input type="text" size="3" ng-model="rating"><br> min value: <input type="text" size="3" ng-model="minrating"><br> max value: <input type="text" size="3"ng-model="maxrating"><br> form has been modified : {{ form.$dirty }}<br> form is valid : {{ 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 --> // we declare a module name for our projet, and its dependencies (none) angular.module(‘revolunet.stepper‘, []) // declare our naïve directive .directive(‘rnstepper‘, function() { return { // can be used as attribute or element restrict: ‘ae‘, // which markup this directive generates template: ‘<button>-</button>‘ + ‘<div>0</div>‘ + ‘<button>+</button>‘ }; });
现在directive rnstepper 已经有了一个简单的雏形了。
可以有如下两种试用方法:
<div rn-stepper> </div>
<rn-stepper> </rn-stepper>
demo: http://jsfiddle.net/revolunet/n4jhg/
添加内部动作
直接上代码:
<!-- lang: js --> .directive(‘rnstepper‘, function() { return { restrict: ‘ae‘, // declare the directive scope as private (and empty) scope: {}, // add behaviour to our buttons and use a variable value template: ‘<button ng-click="decrement()">-</button>‘ + ‘<div>{{value}}</div>‘ + ‘<button ng-click="increment()">+</button>‘, // this function is called on each rn-stepper instance initialisation // we just declare what we need in the above template link: function(scope, ielement, iattrs) { scope.value = 0; scope.increment = function() { scope.value++; }; scope.decrement = function() { scope.value--; }; } }; });
我们在template中,分别给两个button添加了click事件响应,在link方法中实现了响应的方法。
这里的scope是一个private scope,其作用域仅限rnstepper这个directive。
demo: http://jsfiddle.net/revolunet/a92aw/
与外部世界(外部作用域)的交互
直到上面为止,我们的rnstepper都是自己跟自己玩,并没有跟外部作用域进行一些交互。
下面我们将添加一个数据绑定,使rnstepper与外部世界建立联系。
直接上代码:
<!-- lang: js --> scope: { value: ‘=ngmodel‘ }
我们在scope中添加了一组键值对,这样,会自动建立内部变量value与外部属性ngmodel的联系。
这里的=代表的意思是双向绑定(double data-binding)。
什么叫双向绑定?
即: 当value发生改变,那么ngmodel也会发生改变,反之亦然。
在我们的这个demo中,看下面这行代码:
<!-- lang: js -->
<div rn-stepper ng-model="rating"></div>
这里的意思就是: directive rnstepper的内部变量value与外部scope中的rating建立了双向数据绑定。
demo: http://jsfiddle.net/revolunet/9e7hy/
让我们组件更加友好
直接上代码:
<!-- lang: js --> .directive(‘rnstepper‘, function() { return { // restrict and template attributes are the same as before. // we don‘t need anymore to bind the value to the external ngmodel // as we require its controller and thus can access it directly scope: {}, // the ‘require‘ property says we need a ngmodel attribute in the declaration. // this require makes a 4th argument available in the link function below require: ‘ngmodel‘, // the ngmodelcontroller attribute is an instance of an ngmodelcontroller // for our current ngmodel. // if we had required multiple directives in the require attribute, this 4th // argument would give us an array of controllers. link: function(scope, ielement, iattrs, ngmodelcontroller) { // we can now use our ngmodelcontroller builtin methods // that do the heavy-lifting for us // when model change, update our view (just update the div content) ngmodelcontroller.$render = function() { ielement.find(‘div‘).text(ngmodelcontroller.$viewvalue); }; // update the model then the view function updatemodel(offset) { // call $parsers pipeline then update $modelvalue ngmodelcontroller.$setviewvalue(ngmodelcontroller.$viewvalue + offset); // update the local view ngmodelcontroller.$render(); } // update the value when user clicks the buttons 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/
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
上一篇: 北京亦庄云计算产业发展提速
下一篇: 真的是这样吗