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/
感謝閱讀，希望能協助到大家，謝謝大家對本站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
