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/

出于某种原因（第一次尝试使用角度），我花了很长时间设置小提琴，但这是金钱镜头：

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您可以使用它来获取当前值。因此，您可以在隔离范围属性上设置 $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 回答