ngModelController

ng-model 指令所对应的ngModelController(数据绑定，验证，css更新，格式化)

<form name="myForm">
 <div contenteditable
  name="myWidget" ng-model="userContent"
  strip-br="true"
  required>Change me!</div>
  <span ng-show="myForm.myWidget.$error.required">Required!</span>
 <hr>
 <textarea ng-model="userContent"></textarea>
</form>

angular.module('customControl', []).directive('contenteditable',function() {
 return {
    restrict: 'A', // 作为元素属性 
    require: '?ngModel', // 获取ngModelController 
    link: function(scope, element, attrs, ngModel) 
    { 
       if(!ngModel) return; // 如果没有ng-model则什么都不做    
       // 指定UI的更新方式
    　　ngModel.$render = function() {
      　　element.html(ngModel.$viewValue || '');
    　　};

    　　// 监听change事件来开启绑定
   　　 element.on('blur keyup change', function() {
      　　scope.$apply(read);
    　　});
    　　read(); // 初始化

    　　// 将数据写入model
    　　function read() {
      　　var html = element.html();
      　　// 当我们清空div时浏览器会留下一个<br>标签
      　　// 如果制定了strip-br属性，那么<br>标签会被清空
      　　if( attrs.stripBr && html == '<br>' ) {
        　　html = '';
      　　}
      　ngModel.$setViewValue(html);
    　　}
  　}
};});

 

• • $render()　　//当视图需要更新的时候会被调用。
  • $isEmpty(value)
  • $setValidity(errorKey,isValid)
  • $setPristine()
  • $cancelUpdate()
  • $setViewValue()
  • $viewValue
  • $modelValue
  • $parsers　　//dom读取值经过函数管道传递到model中，用于验证
  • $formatters　　//model变化时把值经过函数管道传递到视图, 只有model在代码中改变时才能触发formatter
  • $viewChangeListeners
  • $error
  • $pristine
  • $dirty
  • $valid
  • $invalid

$parsers

<form role="form" name="myform">
    <div class="form-group">
        <label>View Value:</label>
        <input name="someinput" changecase="" ng-model="some_letters.value">
    </div>
</form>

<strong>ModelValue:</strong>   <br>

var view_value;
ngModel.$parsers.push(function(value){

    var return_value;

    if(value.length > 5){　　//效果，输入字符无法超过5个
        return_value = view_value;
        ngModel.$setViewValue(view_value);
        ngModel.$render();
        ngModel.$setValidity('is_valid', false);
    } else {
        return_value = value;
        view_value = return_value;
        ngModel.$setValidity('is_valid', true);
    }

    return return_value;
});

 

 

 

 

 

 

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

http://sentsin.com/web/659.html