ng-model-options指令

概述

ng-model-options指令用来更改ng-model等指令的默认行为,这个指令可以在任何位置使用,它会影响ng-model和输入型指令以及他们的派生指令。ng-model-options指令可以被指定为一个运算式,但是这个运算式在通过Angular计算后必须得到一个Object,这个Object的属性就是设置项。
一个指令的option值是会向上计算的,比如:

在这段代码中,input元素的options属性为:

{ allowInvalid: true, updateOn: 'default' }

实现细节

ng-model-options指令的基础是$modelOptionsProvider。
provider的核心代码:

var _options = extend({}, parentOptions, options);

在这个provider中,最核心的代码只有一行,这行代码实现了上面所说的option向上合并的功能。
在ng-model-options指令中,最关键的部分在link中:

pre: function ngModelOptionsPreLinkFn(scope, element, attrs, ctrls) {
  var optionsCtrl = ctrls[0];
  var parentOptions = ctrls[1] ? ctrls[1].$options : $modelOptions;
  optionsCtrl.$options = parentOptions.createChild(scope.$eval(attrs.ngModelOptions));
}

在这里会根据父option以及自己的ng-model-options属性创建一个options,利用的是$modelOptionsProvider提供的功能。
options默认值:

属性 默认值
updateOn default
debounce 0
allowInvalid undefined
getterSetter undefined
timezone undefined

样例代码





    Test


     


user.name = 

这段代码修改了默认数据更新方式,在输入焦点发生变化的时候才会把数据写入到scope中去。

你可能感兴趣的:(ng-model-options指令)