当前位置：首页 > 资讯 > 技术文档

AngularJS实践之使用NgModelController进行数据绑定

时间：2022-09-10 23:05 编辑：来源：阅读：
扫一扫，手机访问

摘要：AngularJS实践之使用NgModelController进行数据绑定

[b]前言[/b] 在Angular应用中，ng-model指令时不可缺少的一个部分，它用来将视图绑定到数据，是双向绑定魔法中重要的一环。ngModelController则是ng-model指令中所定义的controller。这个controller包含了一些用于数据绑定，验证，CSS更新，以及数值格式化和解析的服务。它不用来进行DOM渲染或者监听DOM事件。与DOM相关的逻辑都应该包含在其他的指令中，然后让这些指令来试用ngModelController中的数据绑定功能。 [b]注意[/b]：本篇文章不是对NgModelController文档的说明，而是更偏向实践。下面我将全程带领大家去实现一个自定义指令，并且利用ng-model属性来做双方的数据绑定。 [b]示例[/b] 我们的app中使用了一个自定义的指令，名字叫做timeDruation [b]如下[/b]

<div ng-app="HelloApp" ng-controller="HelloController">
 <h1>自定义指令</h1>
 <time-duration ng-model="test"></time-duration>
 <h1> 默认指令</h1>
 <input ng-model="test">second
</div>

[b]JS代码如下，[/b]

angular.module('HelloApp', [])
 .directive('timeDuration', TimeDurationDirective);
 .controller('HelloController', function($scope) {
 $scope.test = 1;
 });

我们的示例指令可以做这样一件事，可以指定几个常见的时间单位，并且能够输入数据。最终我们将得到对应的秒数。其功能的截图如下， [img]http://files.jb51.net/file_images/article/201610/201610890817545.png?2016989831[/img] 这里我们特意将test变量分别绑定到我们的自定义指令和默认指令中，以观察其效果。 [b]自定义指令[/b] 闲话少叙，下面来看代码先上指令的模板。从上图中可以看出，指令包含一个输入框一个下拉选择框。

<div class="time-duration">
 <input ng-model='num'>
 <select ng-model='unit'>
 <option value="seconds">Seconds</option>
 <option value="minutes">Minutes</option>
 <option value="hours">Hours</option>
 <option value="days">Days</option>
 </select>
</div>

模板其实很简单，这里就不多说了。下面我们来看看这个指令的逻辑部分。

function TimeDurationDirective() {
 var tpl = '....'; // 指令模板代码就是上面的内容，这里就不复制了。
 
 return {
 restrict: 'E',
 replace: true,
 template: tpl,
 require: 'ngModel',
 scope: {},
 link: function(scope, element, attrs, ngModelController) {
  var multiplierMap = {
  seconds: 1,
  minutes: 60,
  hours: 3600,
  days: 86400
  };
  var multiplierTypes = ['seconds', 'minutes', 'hours', 'days'];

  // TODO
 }
 };
}

指令的link方法我们暂时TODO了它。后面会逐步完善。我先来看看这个指令的定义，其中用到了require声明。简单来说，require的作用就是为这个directive声明一个依赖关系，表明此directive依赖另一个指令的controller属性。这里稍微说明一下require的衍生用法。我们可以在require前加上修辞量词，比如，

return {
 require: '^ngModel'
}

return {
 require: '?ngModel'
}

return {
 require: '?^ngModel'
}

1、^前缀修饰表示允许查找当前指令的父级指令，如果找不到对应指令的controller则抛出一个错误。 2、?则表示将这个require动作变成一个可选项，意思就是找不到对应指令的controller就算了，不会抛出错误。 3、当然，我们也可以联合使用这两个前缀修饰。相对?ngModel，^ngModel我们使用的频率要更加高一点。 [b]比如[/b]

<my-directive ng-model="my-model">
 <other-directive></other-directive>
</my-directive>

这时，我们在other-directive中使用[code]require: ^ngModel[/code]，它将会自动查找my-directive指令声明中的controller属性。 [b]使用NgModelController[/b] 当我们声明了[code]require: 'ngModel'[/code]之后，在link方法中会注入第四个参数，这个参数就是我们require的那个指令对应的controller。这里就是内置指令ngModel的指控器ngModeController了。

link: function (scope, element, attrs, ngModelCtrl) {
 // TODO
}

[b]$viewValue和$modelValue[/b] 在ngModelController中有两个很重要的属性，一个叫做$viewValue，一个叫做$modeValue。 [b]这两者的含义官方的解释如下[/b] [b] $viewValue[/b]: Actual string value in the view. [b]$modelValue[/b]: The value in the model, that the control is bound to. 如果你对上面的官方解释有疑惑的话，我这里给出一种我个人的解释。 $viewView就是指令渲染模板所用的值，而$modelView是在控制器中流通的值。很多时候，这两个值可能是不一样的。比如你在页面上展示了一个日期，它显示的可能是“Oct. 20 2015”这样的字符串，但是呢，这个字符串在控制器中对应的值可能是一个Javascript的Date对象的实例。再比如，我们的这个time-duration示例中，$viewValue其实指的是指令模板中num和unit组合出来的值，而$modelValue是HelloAppController中test变量对应的值。 [b]$formatters和$parses[/b] 除了$viewValue和$modelValue这两个属性之外，还有两个用来处理他们的方法。分别是$parses和$formatters。前者的是作用是将[code]$viewValue->$modelValue[/code]，后者的作用恰好相反，是将[code]$modelValue->$viewValue[/code]。 time-duration指令与外部控制器以及其内部的运作如下图， [img]http://files.jb51.net/file_images/article/201610/201610891116209.png?20169891125[/img] 1、在外部控制器中（即这里的HelloApp的controller），我们通过[code]ng-model="test"[/code]将test变量传入指令time-duration中，并建立绑定关系。 2、在指令内部，$modelValue其实就是test值的一份拷贝。 3、我们通过[code]$formatters()[/code]方法将$modelValue转变成$viewValue。 4、然后调用[code]$render()[/code]方法将$viewValue渲染到directive template中。 5、当我们通过某种途径监控到指令模板中的变量发生变化之后，我们调用[code]$setViewValue()[/code]来更新$viewValue。 6、与（4）相对应，我们通过$parsers方法将$viewValue转化成$modelValue。 7、当$modelValue发生变化后，则会去更新HelloApp的UI。 [b]完善指令逻辑[/b] 按照上面的流程，我们先来将$modelValue转化成$viewValue，然后在指令模板中进行渲染。

// $formatters接受一个数组
// 数组是一系列方法，用于将modelValue转化成viewValue
ngModelController.$formatters.push(function(modelValue) {
 var unit = 'minutes', num = 0, i, unitName;
 modelValue = parseInt(modelValue || 0);
 
 for (i = multiplierTypes.length-1; i >= 0; i--) {
 unitName = multiplierTypes[i];

 if (modelValue % multiplierMap[unitName] === 0) {
  unit = unitName;
  break;
 }
 }
 
 if (modelValue) {
 num = modelValue / multiplierMap[unit];
 }

 return {
 unit: unit,
 num: num
 };
});

最后返回的对象就是$viewValue的value。（当然$viewValue还会有其他的一些属性。）第二步，我们调用$render方法将$viewValue渲染到指令模板中去。

// $render用于将viewValue渲染到指令的模板中
ngModelController.$render = function() {
 scope.unit = ngModelCtrl.$viewValue.unit;
 scope.num = ngModelCtrl.$viewValue.num;
};

第三步，我们通过$watch来监控指令模板中num和unit变量。当其发生变化时，我们需要更新$viewValue。

scope.$watch('unit + num', function() {
// $setViewValue用于更新viewValue
 ngModelController.$setViewValue({
 unit: scope.unit,
 num: scope.num
 });
});

第四步，我们通过$parsers将$viewValue->$modelValue。

// $parsers接受一个数组
// 数组是一系列方法，用于将viewValue转化成modelValue
ngModelController.$parsers.push(function(viewValue) {
 var unit = viewValue.unit；
 var num = viewValue.num;
 var multiplier;

 multiplier = multiplierMap[unit];

 return num * multiplier;
});

[b]总结[/b] 好了，到这一个双方的数据绑定逻辑就建立了。不知道大家都学会了吗？希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

全部评论(0)

上一篇：Angularjs中UI Router的使用方法
下一篇：angularjs2 ng2 密码隐藏显示的实例代码

资讯排行榜
更多>>