angula 之 ngModel

对于ngModel

提供 ngModelController

为ngModel提供api

包含 data-binding，validation，css updates, value formationg, parsing 等功能

// 方法
$render()  // 需要被重写  默认是 noop 函数。
$setViewValue()
$setValidity()
$commitViewValue()
$isEmpty()
$rollbackViewValue()
$setDirty()
$setPristine()
$setTouched()
$setUntouched()
$validate()

// 属性
$formatters
$viewValue
$error
$dirty
$invalid
$modelValue
$name
$options
$parsers
$pending
$pristine
$render
$untoicued
$valid
$validators
$viewChangeListeners

等等、

对于 ngModal 的理解。如果是调用了angular 内部改写过的html 控件。对于绑定的ng-model 的控件，都会共享这个数据的结果。

例如

<input type="text" ng-model="test"/>
<textarea ng-model='test'></textarea>

这个时候，两者同时改变的时候都会触发两者的变化。

但是

<p ng-model="test"></p>

这个时候，由于angular 内部没有重写对于p标签的重写，导致ng-model 对这个控件是没有作用的。

ps: 可以通过ng-bind指令去解决这个问题。

但是可以通过万能的指令去解决这个问题。

.directive('testDirc',function(){
    return {
        restrict:'A',
        require:'?ngModel',
        link:function(scope,element,attrs,ngModel){
            if(!ngModel){
                return;
            }
            
            ngModel.$render = function(){
                element.html(ngModel.$viewValue);
            }
        }
    }
})

这个时候就有用了。

<p ng-model="test" test-dirc></p>