1

私は NgModelController の$formattersと$ parsersを理解しようとしており、この優れた例を使用しています

このデモを作成しました。しかし、クリアする必要がある質問はほとんどありません

以下は私のメインコードです

<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();
            });
        }
    };
}]);

私のいくつかの混乱は、私の理解の下でもあります。間違っている場合は修正してください

  1. 現在のシナリオに対する私の理解では

viewValueが変更されたことを意味するよりも、スコープ値 (つまり、カスタム ディレクティブ入力ボックスを使用した ng-model 内) で何かが変更されます

そして、カスタムディレクティブなしで同じ ng-model の入力ボックスで何かが変更された場合、それはmodelValueが変更されたことを意味します

そうですか？

  1. スコープがカスタム ディレクティブで分離されていると設定されている場合、変更が同じ値 {}を持つ他の入力ボックスに反映される理由ng-model

    require:'ngModel' カスタムディレクティブに追加したから？

これは正しいですか？

  1. $renderをいつ呼び出す必要がありますか? $render ドキュメントによると

ビューを更新する必要があるときに呼び出されます。

だから試した

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

しかし、出力 (他のテキスト ボックスと {{ 式 }}) は大文字の値を表示しません:(

$setViewValue電話する必要がありますか

「ビュー値を更新」

しかし、どのように、どこに電話すればよいのでしょうか? 私は試した

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 を介して実行され、$render して DOM を更新します。

ここまでわかんない？コントロールとコントロールの DOM の意味

行も参照してください

「標準入力で使用すると、ビューの値は常に文字列になります」

しかし、$parsers => 内のコンソールを見ると、それはObject {what: undefined} 問題ですか?

  1. 試行しscope.$watch()ますが、大文字として出力されません 

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

これでさえ呼び出されないのはなぜですか？

$watchを使用する場合と、 $viewValueおよび$setViewValueで$renderを使用する場合とその方法を教えてください。

4

0 に答える 0