1

次のような HTML を書きたいとしましょう。

<div my-directive my-start="topModel.start" my-end="topModel.end">

my-directive次のように、で他のディレクティブを呼び出すテンプレートがありますngModel。

<div>
  <input ng-model="myStart" />
  <input ng-model="myEnd" />
</div>

内部入力を透過的に更新したいと思いtopModelます。ng-model属性にドットがなく、値がローカル スコープで設定されているため、この方法では機能しません。

私がこれまでに見つけた唯一の方法は、両方のモデルを見てmy-directive翻訳することですが、それは恐ろしい忌まわしさです.

restrict: 'A',
scope: {
    myStart: '=',
    myEnd: '='
},
link: function(scope, el, attrs) {
    scope.model = { start: scope.myStart, end: scope.myEnd };
    scope.$watch("model.start", function(n) {
        scope.myStart = n;
    });
    scope.$watch("model.end", function(n) {
        scope.myEnd = n;
    });
    scope.$watch("myStart", function(n) {
        scope.model.start = n;
    });
    scope.$watch("myEnd", function(n) {
        scope.model.end = n;
    });
}

この手動の同期をすべて行わずに、バインドを 内部ディレクティブに渡すにはどうすればよいですか?my-directive

編集: http://plnkr.co/edit/ppzVd7?p=previewで plunker を参照してください- これは実際に動作します

EDIT2 : http://plnkr.co/edit/Nccpqn?p=previewで別のものを参照してください- これは、ドットなしの「直接アクセス」がどのように機能しないかを示して$watchesいます。

4

2 に答える 2

1

scopeディレクティブで行うようにプロパティを定義するscope.myStartとscope.myEnd、 と への双方向バインディングを持つと の 2 つのプロパティが自動的に取得されtopModelます。それらをマップするとscope.model、そのバインディングが壊れます。

これが実際の例です：

module.directive('myDirective', function () {
    return {
        scope: {
            myStart: '=',
            myEnd: '='
        },
        template: '<p><label>Start: <input type="text" ng-model="myStart" /></label></p>' +
                  '<p><label>End: <input type="text" ng-model="myEnd" /></label></p>',
        link: function (scope, element, attrs) {
            scope.$watch('myStart', function (val, old) {
                console.log('Start changed from', old, 'to', val);
            });

            scope.$watch('myEnd', function (val, old) {
                console.log('End changed from', old, 'to', val);
            });
        }
    };
});

Plunker

于 2013-06-13T08:36:01.203 に答える