Question

我正在尝试了解NgModelController的 $ formatters 和 $ parsers 以及此excellent example

我创建了this demo.但很少有问题需要清除

以下是我的主要代码

<body ng-app="app">
<input type="text" ng-model="what" placeholder="directive Value" custom-formatter>
<input type="text" ng-model="what" placeholder="model value" >
change value {{ what }}
</body>

和

angular
.module('app')
.directive('customFormatter', ['$timeout',function($timeout){
    return {
        require: 'ngModel',
        scope: {},
        restrict: 'A',
        link: function(scope, element, attrs, ngModelCtrl) {

           // format text going to user ( on view )
            ngModelCtrl.$formatters.push(function(modelValue){
                console.log('MV:' + modelValue);
                if (!modelValue)  return;
                else return modelValue.toUpperCase();
            });

            ngModelCtrl.$render = function () {
                console.log('render called');
                console.log(ngModelCtrl.$viewValue);
            };

            // scope.$watch('what', function() {
            //     console.log('watcher called');
            //       ngModelCtrl.$setViewValue({
            //           what: scope.what
            //       });
            // });

            ngModelCtrl.$parsers.push(function(viewValue){
                console.log('VV:');
                console.log(viewValue);
                if(!viewValue) return;
                else return viewValue.toLowerCase();
            });
        }
    };
}]);

我的理解下面也有一些困惑，如果我错了，请纠正我

在我对当前场景的理解中

范围值的某些变化（即在带有自定义指令输入框的ng模型中）比 viewValue 更改

如果在没有自定义指令但是同样的ng-model的输入框中发生了某些变化，那么这意味着 modelValue 已更改

是吗？

在自定义指令中将范围设置为隔离{}时，为什么更改会反映到具有相同ng-model值的其他输入框

因为我们在自定义指令中添加了require:'ngModel'

这是对的吗？

我们什么时候需要拨打 $ render ？根据{{3}}

在需要更新视图时调用它。

如此尝试

ngModelCtrl.$render = function () {
        console.log('render called');
        console.log(ngModelCtrl.$viewValue;) // this gives UPPERCASE text
};

但输出（另一个文本框和{{expression}}）不显示大写值：（

是否需要拨打$render document来表示

“更新视图值”

但是如何以及在哪里打电话？我试过了

ngModelCtrl.$render = function () {
        console.log('render called');
        ngModelCtrl.$setViewValue({what : scope.what }) << doesn't work
        console.log(ngModelCtrl.$viewValue;) // this gives UPPERCASE text
};

另请参阅特别说明框中的说明

如果你为输入元素调用$ setViewValue，你应该传递输入DOM值。注意$ setViewValue也很重要不会以任何方式调用$ render或更改控件的DOM值。如果我们想以编程方式更改控件的DOM值更新ngModel范围表达式。它的新价值将被提升由模型控制器，它将通过$ formatters运行它， $渲染它以更新DOM。

我不明白这么多？什么意味着控制和控件的DOM

也看到一行

“与标准输入一起使用时，视图值将始终为字符串”

但当我在$ parsers =＆gt;内部查看控制台时问题是Object {what: undefined}吗？

尝试scope.$watch()但没有输出为大写

 scope.$watch('what', function() {
    console.log('watcher called');
      ngModelCtrl.$setViewValue({
          what : scope.what
      });
 });

即使这个从未被调用，为什么会这样？

请告诉我何时使用 $ watch 以及何时使用 $ viewValue 和 $ setViewValue $ render >以及如何。

NgModelController $ parsers和$ formatters不适用于$ render和$ viewValue

0 个答案: