Directive是一組獨立的JavaScript、HTML和CSS，它們封裝了一個特定的行為，它將成為將來創(chuàng)建的Web組件的組成部分，我們可以在各種應用中重用這些組件。在創(chuàng)建之后，我們可以直接通過一個HTML標簽、自定義屬性或CSS類、甚至可以是HTML注釋，來執(zhí)行一個Directive。

這一篇教程將介紹如何創(chuàng)建一個‘自定義步長選擇' Directive，它可以作為一個可重用輸入組件。本文不僅會介紹Directive的一般創(chuàng)建過程，還會介紹輸入控件驗證方法，以及如何使用ngModelController無縫整合任意表單，從而利用AngularJS表單的現(xiàn)有強大功能。

直接上代碼：

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最簡結(jié)構(gòu)

<!-- 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>‘
  };
});

現(xiàn)在directive rnStepper 已經(jīng)有了一個簡單的雛形了。

可以有如下兩種試用方法：

demo: http://jsfiddle.net/revolunet/n4JHg/

添加內(nèi)部動作

直接上代碼：

<!-- 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方法中實現(xiàn)了響應的方法。
這里的scope是一個private scope，其作用域僅限r(nóng)nStepper這個directive。

demo： http://jsfiddle.net/revolunet/A92Aw/

與外部世界（外部作用域）的交互

直到上面為止，我們的rnStepper都是自己跟自己玩，并沒有跟外部作用域進行一些交互。

下面我們將添加一個數(shù)據(jù)綁定，使rnStepper與外部世界建立聯(lián)系。

直接上代碼：

<!-- lang: js -->
scope: {
  value: ‘=ngModel‘
}

我們在scope中添加了一組鍵值對，這樣，會自動建立內(nèi)部變量value與外部屬性ngModel的聯(lián)系。
這里的=代表的意思是雙向綁定（double data-binding）。

什么叫雙向綁定?

即：當value發(fā)生改變，那么ngModel也會發(fā)生改變，反之亦然。

在我們的這個demo中，看下面這行代碼：

<div rn-stepper ng-model="rating"></div>

這里的意思就是： directive rnStepper的內(nèi)部變量value與外部scope中的rating建立了雙向數(shù)據(jù)綁定。

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);
      };
    }
  };
});

這里，我不在需要內(nèi)部變量value了。因為我們在link方法中已經(jīng)拿到了ngModelController的引用，這里的ngModelController.$viewValue其實就是前面例子中的value。

但是我們又添加了另外一組鍵值對require: ‘ngModel‘。

我們使用了兩個新的API：

ngModelController.$render: 在ngModel發(fā)生改變的時候框架自動調(diào)用，同步$modelValue和$viewValue，即刷新頁面。

ngModelController.$setViewValue：當$viewValue發(fā)生改變時，通過此方法，同步更新$modelValue。
demo: http://jsfiddle.net/revolunet/s4gm6/

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章: