4

ここに私の問題があります:モデルディレクティブのように、AngularJSで属性ディレクティブとして使用したいコントロールがあります(実際にはもっとありますが、今のところ1つに固執します)。ドキュメントでいくつかの例を見て、そのようにディレクティブを記述しようとしました。

例えば：

<input type="text" my-datepicker ng-model="appointment" />

これは問題なく動作しますが、これを配列型で動作させようとすると問題が発生します。問題の原因を確認するためにデバッグし、この種の問題の後にドキュメントを検索しました。

最初に試した方法は次のとおりです。

.directive('myAnything', function(){
return {
    restrict: 'A',
    require: '?ngModel', // get a hold of NgModelController
    link: function (scope, element, attrs, ngModel) {
        if (!ngModel) return; // do nothing if no ng-model

        // initialize my control on the element
        // ...

        // Specify how UI should be updated
        ngModel.$render = render;

        // Listen for change events to enable binding
        element.on('change', function () {
            scope.$apply(read);
        });
        read();

        function read() {
            // read from controll, write to model
            // ngModel.$setViewValue([{text:'test'},{text:'test2'},{text:'test3'}]);
        }
        function render() {
            if (ngModel.$modelValue) {
                // update controller form model - render
                // ...
            }
        }
    }
};
});

私は AngularJS を初めて使用するので、私の理解が正しいかどうかわかりません。これまでに思いついたのは、角度が変更をチェックしているときに、配列の詳細なチェックを行わないため、レンダリング関数が呼び出されないということです。これを示すためのフィドルを次に示します: demo

angularにモデルをディープチェックするように指示する方法については何も見つかりませんでしたので、ngModelControllerでどのように行われるかについてソースを詳しく調べ、ディープチェックだけでngModelControllerのようなベースコントローラーを作成すればうまくいくと思いました仕事に。

ngModelController と同様に、myModelController の作成に成功しましたが、3 番目の引数 true をディープ チェックに渡すことによって $watch 呼び出しが行われただけです。

$scope.$watch(function myModelWatch() {
                var value = ngModelGet($scope);
                if (!angular.equals(ctrl.$modelValue, value)) {
                    ctrl.$modelValue = value;
                    ctrl.$render();
                }
                return ctrl.$modelValue;
            },
                function (newValue, oldValue) {
                    if (!angular.equals(newValue, oldValue)) {
                        ctrl.$render();
                    }
                },
                true
             );

これは機能し、次のように ngModel ディレクティブなしで使用できるため、最初のソリューションよりも優れていました (これもよりエレガントです)。

<input type="text" my-anything="listofappointments" />

繰り返しますが、そのディレクティブを別の入力に適用した後、両方が最後のモデルプロパティにバインドされるまで、これは機能しました。

<input type="text" my-anything="secondList" />

angular で呼び出されるディレクティブのセッターに、secondList (ページにある最後のモデル プロパティ) に設定された引数 (ident) があることがわかったところまで、これもデバッグしました。

私の質問は、ここでの私のオプションは何ですか? ドキュメントでこれを行う方法に気付かなかったのかもしれません。これは簡単なシナリオのように見えます...または、角度でこれがどのように達成されるかをより深く理解する必要がありますか? 私のアプローチはこの問題に対してもうまくいきましたか?

コメントや提案をいただければ幸いです。2 番目のアプローチが実行可能である場合は、明らかによりエレガントでユーザー フレンドリー (ng-model なし) であるため、それに固執したいと思いますが、そうでない場合は、他のアプローチも同様に優れています。

ちなみに、明らかに安定したバージョンであるangular v1.0.8を使用しています。（しかし、私もそれを主張しません）

ありがとう！

4

1 に答える 1