Angularjs指令中的ngModel

Home » JavaScript » 前端开发 » Angularjs指令中的ngModel

Archives

文件夹

之前用的时候忘记总结了,这里集中总结一下这个问题。

使用require:‘ngModel’ 这个选项来增强我们对指令的处理,

这样就可以作为link选项的第四个参数,
link: function ($scope,$element,$attrs,$ngModel){
//其他逻辑代码
}

这里面的$ngModel便是代码中ng-model指令传递过来的对象,包含以下这些方法和属性:

  • $viewValue:视图值,即显示在视图(页面)的实际值(就是上面例子中input输入框的值)
  • $modelValue:模型值,即赋给ng-model的值(与控制器绑定的值)
    两者不一定相等,因为$viewValue同步到$modelValue要经过一系列的操作(经过三个管道)。
  • $parsers:一个执行它里面每一个元素(每一个元素都是一个函数)的数组,
    主要是用来做验证和转换值的过程,ngModel从DOM读取的值会被传入到其中的函数它会依次执行每一个函数,把每一个函数执行的结果传个下一个函数,而最后一个函数执行的值将会传到model中,

    我们可以将函数push进去,那样它就会执行。

  • $formatters:也是一个执行它里面每一个元素(每一个元素都是一个函数)的数组,主要用来对值进行格式化和转换,以便在绑定了这个值的控件中显示。当数据的模型值发生变化的时候,里面的函数会被一一执行,同样我们就可以将函数push进去,让它执行
  • $viewChangeListeners:也是一个由函数组成的数组当视图的值发生变化的时候里面的函数会被一一调用,实现跟$watch类似的功能。
  • $render:函数负责将模型值同步到视图上, 如果模型值被改变,需要同步视图的值。
  • $setViewValue:用于设置视图值(上面的例子就是将input的value值赋值给$viewValue)
  • $error:一个包含所有error的对象
  • $setPristine:设置为原始状态,会添加ng-pristine的class类名,移除ng-dirty的class类名
  • $setValidity:设置错误的标志为一个函数,接受两个参数,第一个参数为错误标志的名字,是字符串类型,将会被设置成$error的属性第二个参数为布尔值,为这个错误标志的值。

     

发表评论