Question

我有一个像这样实例化的指令：

<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的双向数据绑定？

Answer 1

根据你的直通的复杂程度，你可以使用= scope在本地名称和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'
},

Answer 2

有几种方法可以做到这一点..

在名为ctrl的链接函数的.$setViewValue(valueHere)参数上有一个函数，您可以使用该函数来设置ngModel引用的值。它将完成设置$ dirty等工作。还有一个名为.$viewValue的属性可用于获取当前值。因此，您可以在isolate scope属性上设置$ 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);
           }
       });
    }
});

在使用模板的指令中更新ng-model

2 个答案: