国产gaysexchina男同gay,japanrcep老熟妇乱子伦视频,吃奶呻吟打开双腿做受动态图,成人色网站,国产av一区二区三区最新精品

AngularJS 預(yù)定義的 NgModelController

2018-07-26 17:20 更新

在前面講 conroller 參數(shù)的時候,提到過可以為指令定義一個 conroller 。官方的實現(xiàn)中,有很多已定義的指令,這些指令當中,有兩個已定義的 conroller ,它們是 NgModelController 和 FormController ,對應(yīng) ng-model 和 form 這兩個指令(可以參照前面的“表單控件”一章)。

在使用中,除了可以通過 $scope 來取得它們的引用之外,也可以在自定義指令中通過 require 參數(shù)直接引用,這樣就可以在 link 函數(shù)中使用 controller 去實現(xiàn)一些功能。

先看 NgModelController 。這東西的作用有兩個,一是控制 ViewValue 與 ModelValue 之間的轉(zhuǎn)換關(guān)系(你可以實現(xiàn)看到的是一個值,但是存到變量里變成了另外一個值),二是與 FormController 配合做數(shù)據(jù)校驗的相關(guān)邏輯。

先看兩個應(yīng)該是最有用的屬性:

$formatters 是一個由函數(shù)組成的列表,串行執(zhí)行,作用是把變量值變成顯示的值。
$parsers 與上面的方向相反,把顯示的值變成變量值。

假設(shè)我們在變量中要保存一個列表的類型,但是顯示的東西只能是字符串,所以這兩者之間需要一個轉(zhuǎn)換:

<div ng-controller="TestCtrl">
  <input type="text" ng-model="a" test />
  <button ng-click="show(a)">查看</button>
</div>
var app = angular.module('Demo', [], angular.noop);

app.directive('test', function(){
  var link = function($scope, $element, $attrs, $ctrl){

    $ctrl.$formatters.push(function(value){
      return value.join(',');
    });

    $ctrl.$parsers.push(function(value){
      return value.split(',');
    });
  }

  return {compile: function(){return link},
          require: 'ngModel',
          restrict: 'A'}
});

app.controller('TestCtrl', function($scope){
  $scope.a = [];
  //$scope.a = [1,2,3];
  $scope.show = function(v){
    console.log(v);
  }
});

上面在定義 test 這個指令, require 參數(shù)指定了 ngModel 。同時因為 DOM 結(jié)構(gòu), ng-model 是存在的。于是, link 函數(shù)中就可以獲取到一個 NgModelController 的實例,即代碼中的 $ctrl 。

我們添加了需要的過濾函數(shù):

  • 從變量( ModelValue )到顯示值( ViewValue )的過程, $formatters 屬性,把一個列表變成一個字符串。
  • 從顯示值到變量的過程, $parsers 屬性,把一個字符串變成一個列表。

對于顯示值和變量,還有其它的 API ,這里就不細說了。

另一部分,是關(guān)于數(shù)據(jù)校驗的,放到下一章同 FormController 一起討論。


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號