2015-6-8 使用ngModel.NgModelController

使用ngModel.NgModelController

在书写Angular指令的时候,经常需要和model进行交互, 你可以自己处理，可以使用ngModel的NgModelController进行处理。

引入NgModelController

参看 bootstrap-ui button.js Code Snapshot:

两个关键点: require

require: 'ngModel'

link函数

link: function (scope, element, attrs, ngModelController) {
}

.directive('btnRadio', function () {
  return {
    require: ['btnRadio', 'ngModel'],
    controller: 'ButtonsController',
    link: function (scope, element, attrs, ctrls) {
     ... ...
    }
  };
})

四个value

real model value, 例如 $scope.num = 100
ngModelCtrl.$modelValue, 是#1的一个copy
ngModelCtrl.$ViewValue, 是#4的一个copy
real view value，例如视图上真正的值, 例如input元素的value值

NgModelController的工作就是控制着四个值之间的变化，例如如果#1发生改变，那么#4也会发生变化，反之#4变化的话，#1也会变

Value Circle

<$modelValue> → ngModelCtrl.$formatters(realModel) → $viewValue
                                                       ↓
↑                                                  $render()
                                                       ↓
↑                                                  UI changed
                                                       ↓
ngModelCtrl.$parsers(newViewValue) ← $setViewValue(newViewValue)

$render方法

当UI需要更新时，该方法会被调用，一般需要用户自己去实现该方法

$render() method 在以下的情况会被调用:

$rollbackViewValue() is called. If we are rolling back the view value to the last committed value then $render() is called to update the input control. The value referenced by ng-model is changed programmatically and both the $modelValue and the $viewValue are different from last time.

$setViewValue方法

当UI发生变化(事件的触发等)，将得到变化的值，设置给$viewValue

$formatters

一组管道, 从$modelValue到$viewValue

function formatter(value) {
  if (value) {
    return value.toUpperCase();
  }
}
ngModel.$formatters.push(formatter);

$parsers

一组管道, 从$viewValue到$modelValue

Example

angular-ui boostrap button.js angular-ui bootstrap tooltip.js Time转换你可以使用BootCDN 引入需要的库

hjzheng / CUF_meeting_knowledge_share

2015-6-8 使用ngModel.NgModelController #35