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

序

在Angular应用中，ng-model指令是不可或缺的一部分，用于将视图绑定到数据，是双向绑定魔法的重要组成部分。NgModelController是在ng-model指令中定义的控制器。这个控制器包含一些数据绑定、验证、CSS更新、数字格式化和解析的服务。它不用于DOM呈现或监控DOM事件。与DOM相关的逻辑应该包含在其他指令中，然后让这些指令尝试ngModelController中的数据绑定功能。

注意：本文不是对NgModelController文档的描述，而是更实用。接下来，我将引导您实现一个自定义指令，并使用ng-model属性在双方之间进行数据绑定。

例子

我们的应用程序使用了一个名为timeDruation的定制指令

如下

div ng-app=' hello app ' ng-controller=' hello controller ' h1自定义指令/h1时长ng-model=' test '/时长h1默认指令/h1输入ng-model=' test '秒/div js代码如下：

angular.module('HelloApp '，[])。指令(' timeDuration '，time duration direction)；控制器(' HelloController '，函数($ scope){ $ scope . test=1；});我们的示例指令可以做这样的事情，可以指定几个常见的时间单位，并且可以输入数据。最后，我们会得到相应的秒数。其功能截图如下。

在这里，我们专门将测试变量绑定到我们的自定义指令和默认指令，以观察其效果。

自定义指令

闲话少了，我们来看看下面的代码

首先是教学模板。从上图可以看出，指令包含一个输入框和一个下拉选择框。

div class='time-duration '输入ng-model='num '选择ng-model='unit '选项值='seconds'Seconds/option选项值='minutes '分钟/option选项值=' hours '小时/Option选项值=' days '天/option/select/div模板其实很简单，这里就不多说了。让我们看看这个指令的逻辑部分。

函数TimeDurationDirective(){ var TPL=' .//指令模板代码就是上面的内容，这里就不复制了。返回{ restrict: 'E '，replace: true，template: tpl，require: 'ngModel '，scope: {}，link: function(scope，element，attrs，ng model controller){ var multiplierMap={ seconds 3360 1，minutes: 60，hours: 3600，days : 86400 }；var multiplierttypes=['秒'，'分'，'小时'，'天']；//TODO } }；}指令的链接方法。我们暂时做这件事。以后会逐渐改善。

让我首先看看这个指令的定义，其中使用了require声明。简单来说，require的功能是声明这个指令的依赖关系，表示这个指令依赖于另一个指令的控制器属性。

这是对require的派生用法的一点解释。

我们可以在require之前添加修辞量词，例如，

返回{需要： '^ngModel'}return {需要： }？ngModel ' }返回{ require: '？^ngModel'} 1。前缀修改表示允许查找当前指令的父指令。如果找不到相应指令的控制器，就会抛出错误。

2、意味着这个require动作变成了一个选项，也就是说找不到对应指令的控制器，不会抛出错误。

3.当然，我们也可以一起使用这两个前缀。

亲戚？我们更频繁地使用它。

例如

My-directional ng-model=' my-model ' other-direction/other-direction/my-directional此时，我们在other-directional中使用require: ^ngModel，它将自动在my-directional指令声明中找到controller属性。

使用模型控制器

在我们声明required :‘ng model’之后，第四个参数将被注入到link方法中，这是对应于我们需要的指令的控制器。这是内置指令模块的指令模块控制器。

Link :函数(作用域、元素、属性、ngmodelctrl) {//todo} $ viewvalue和$modelValue

ngModelController中有两个重要的属性，一个叫做$viewValue，另一个叫做$modeValue。

官方对两者含义的解释如下

$viewValue:视图中的实际字符串值。

$modelValue:控件绑定到的模型中的值。

如果你对以上官方解释有疑问，我在这里给你个人解释。

$viewView是指令用来渲染模板的值，而$modelView是控制器中循环的值。很多时候，这两个值可能是不同的。

例如，您在页面上显示一个日期，该日期可能显示类似“2015年10月20日”的字符串，但是该字符串在控制器中的对应值可能是一个Javascript日期对象的实例。

再举一个例子，在我们的持续时间例子中，$viewValue实际上指的是指令模板中num和unit的组合值，而$modelValue则是对应于HelloAppController中测试变量的值。

$格式化程序和$解析程序

除了$viewValue和$modelValue这两个属性之外，还有两种方法可以处理它们。它们是$解析器和$格式化器。

前者用于设置$viewValue-$modelValue，后者用于设置$modelValue-$viewValue。

持续时间命令、外部控制器及其内部操作如下。

1.在外部控制器(这里也就是HelloApp的控制器)中，我们通过ng-model='test '将测试变量传递到指令时长中，建立绑定关系。

2.在指令中，$modelValue实际上是测试值的副本。

3.我们使用$formatters()方法将$modelValue转换为$viewValue。

4.然后调用$render()方法将$viewValue呈现到指令模板中。

5.在我们监控到指令模板中的变量以某种方式发生变化后，我们调用$setViewValue()来更新$viewValue。

6.对应于(4)，我们通过$ parsers方法将$viewValue转换为$modelValue。

7.当$modelValue改变时，HelloApp的UI将会更新。

改进指令逻辑

根据上面的过程，我们首先将$modelValue转换成$ viewValue，然后在指令模板中进行渲染。

//$格式化程序接受数组。//Array是一系列用于将modelValue转换为viewvaluemodelcontroller的方法。$ formatters。push(function(model value){ var unit=' minutes '，num=0，I，unitnamemodel value=parseInt(model value | | 0)；for (i=乘法类型. length-1；I=0；I-){ unitName=multipliettypes[I]；if(model value % multiplierMap[unit name]===0){ unit=unit name；打破；} } if(model value){ num=model value/multiplierMap[unit]；}返回{ unit: unit，num : num }；});最后返回的对象是$viewValue的值。(当然，$viewValue也有一些其他属性。)

第二，我们调用$render方法将$viewValue呈现到指令模板中。

//$render用于将视图值呈现到指令ngmodelcontroller的模板中。$ render=function () {scope。unit=ngmodelctrl。$ viewvalue。单位；scope.num=ngModelCtrl。$ viewValue.num};第三步，我们使用$watch来监控指令模板中的num和unit变量。当它改变时，我们需要更新$viewValue。

范围。$ watch ('unitnum '，function () {//$ setviewvalue用于更新视图值ngmodelecontroller。$ setviewvalue ({unit:scope。num:scope单元。num })；});第四步，我们通过$解析器放入$viewValue-$modelValue。

//$ parser接受数组//Array是一系列用于将视图值转换为模型值的方法。$解析器。push(function(ViewValue){ VarUnit=ViewValue。单位；var num=viewValue.numvar乘数；乘数=乘数[单位]；返回num *乘数；});摘要

嗯，双方的数据绑定逻辑已经建立。不知道大家都学会了吗？希望本文的内容能给大家的学习或工作带来一些帮助。有问题可以留言交流。