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