ng-model是AngularJS的原生指令,通过require: 'ngModel'可以更加深入地处理数据的双向数据绑定。

  ng-model里面的属性有:

  $parsers:保存了从viewValue到modelValue绑定过程中的处理函数。

  $formatters:保存了从modelValue到viewValue绑定过程中的处理函数。

  $setViewValue:当AngularJS外部发生某件事情的时候,需要调用这个函数才能让AngularJS知道应该更新modelValue了。

  $render:设定当model发生变化时该如何去更新view。

  $setValidity:设置验证结果。

  $viewValue:视图里的值。

  $modelValue:模型里的值。


$parsers、$formatters和$setValidity的例子:

<!DOCTYPE html>
<html ng-app="myModule">

<head>
    <meta charset="utf-8">
</head>

<body>
    <article ng-controller="myController">
        <form name="myForm">
            <input type="text" name="evenInput" ng-model="data.even" even>
            <input type="text" ng-model="data.even" even>
            <section ng-show="myForm.evenInput.$error.even">
                只能为偶数
            </section>
        </form>
    </article>
    <script src="../JS/angular.min.js"></script>
    <script type="text/javascript">
    angular.module('myModule', [])
        .controller('myController', function() {

        })
        .directive('even', function() {
            return {
                require: 'ngModel',
                link: function($scope, iElm, iAttrs, ngModelController) {
                    ngModelController.$parsers.push(function(viewValue) { //parser-语法分析器
                        if (viewValue % 2 === 0) {
                            ngModelController.$setValidity('even', true); //.$error.even为false
                        } else {
                            ngModelController.$setValidity('even', false); //.$error.even为true
                        }
                        return viewValue;
                    });
                    ngModelController.$formatters.push(function(modelValue) {
                        if (modelValue !== undefined) {
                            modelValue = modelValue + ' some words';
                        }
                        return modelValue;
                    });
                }
            };
        });
    </script>
</body>

</html>


$setViewValue、$render和$viewValue的例子:

<!DOCTYPE html>
<html ng-app="myModule">

<head>
    <meta charset="utf-8">
</head>

<body>
    <article ng-controller="myController">
        <my-content ng-model="someText"></my-content>
        <my-content ng-model="someText"></my-content>
    </article>
    <script src="../JS/angular.min.js"></script>
    <script type="text/javascript">
    angular.module('myModule', [])
        .controller('myController', function() {

        })
        .directive('myContent', function() {
            return {
                restrict: 'E',
                template: '<div contenteditable="true"></div>',
                require: 'ngModel',
                replace: true,
                link: function($scope, iElm, iAttrs, ngModelController) {
                    iElm.on('keyup', function() {
                        $scope.$apply(function() {
                            ngModelController.$setViewValue(iElm.html());
                        });
                    });
                    ngModelController.$render = function() {
                        iElm.html(ngModelController.$viewValue);
                    }
                }
            };
        });
    </script>
</body>

</html>