15

次のようにインスタンス化されるディレクティブがあります。

<datepicker ng-model="foo"></datepicker>

ディレクティブ内で、datepickerタグは次のテンプレートに置き換えられます。

template: '<div class="datepicker-wrapper input-append">' +
                     '<input type="text" class="datepicker" />' +
                     '<span class="add-on"><i class="icon-calendar"></i></span>' +
                   '</div>'

ng-modelをバインドする値は、入力フィールドの値です。ng-modelの双方向データバインディングを維持するために、これを実行するための最良の方法は何ですか？

4

2 に答える 2

32

パススルーの複雑さに応じて、次のフィドルのように、= スコープを使用してローカル名と ngModel 間の双方向バインドを行うことができます。

http://jsfiddle.net/mThrT/22/

なんらかの理由でフィドルをセットアップするのにかなりの時間を費やしましたが（初めてangularで試しました）、ここにお金のショットがあります：

template: '<div class="datepicker-wrapper input-append">' 
        + '<input type="text" class="datepicker" ng-model="bar" />' 
        + '<span class="add-on"><i class="icon-calendar"></i></span>' 
        + '</div>',
scope: {
    bar: '=ngModel'
},
于 2012-12-16T23:13:51.970 に答える
10

これを行うにはいくつかの方法があります..

ctrlリンク関数のパラメーターには、 .$setViewValue(valueHere)ngModel が参照している値を設定するために使用できる関数があります。$dirty などを設定する作業を行い.$viewValueます。現在の値を取得するために使用できるプロパティもあります。そのため、isolate スコープ プロパティに $watch を設定して、ngModel 値を更新できます。

これを行うためのより正しい方法は、リンク関数にありますが、次のようになります。

app.directive('myDirective', function() {
    restrict: 'E',
    require: 'ngModel',
    scope: {}, //isolate the scope
    template: '<div class="datepicker-wrapper input-append">' +
                         '<input type="text" class="datepicker" ng-model="date" />' +
                         '<span class="add-on"><i class="icon-calendar"></i></span>' +
                       '</div>',
    controller: function($scope) { 
    },
    link: function(scope, elem, attr, ctrl) {
       //get the value from ngModel
       scope.date = ctrl.$viewValue;

       //set the value of ngModel when the local date property changes
       scope.$watch('date', function(value) {
           if(ctrl.$viewValue != value) {
              ctrl.$setViewValue(value);
           }
       });
    }
});
于 2012-10-22T16:09:18.197 に答える