javascript - Angular 自定义指令数据绑定(bind)

Question

我有一个表单，我试图将日期选择器对象转换为指令。我能够将数据输入到输入中，但它没有将数据与传递给它的范围变量绑定(bind)。这是我的代码。

查看:

<ng-date-picker id-attr="lastRedemptionDate" ng-model="spr.lastRedemptionDate"></ng-date-picker>

指令:

myApp.directive('ngDatePicker', function() {
    return {
        restrict: 'AEC',
        templateUrl: 'assets/angular/directives/datePicker.html',
        replace: true,
        scope: {
            objID: '@idAttr',
            personName: "=ngModel"
        },
        link: function($scope, elem, attrs, controllerInstance) {
            $scope.$apply($scope.method());

            $('.datepicker').datepicker({
                format: 'm/d/yyyy',
                autoclose: true
            });

            console.log($scope);
        }
    }
})

指令模板:

<div class='input-group input-append date'>
    <input type='text' class="form-control datepicker" id="{{ objID }}" value="{{ personName }}" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

任何帮助将不胜感激。

Answer 1

使用 ngModel 指令将模型绑定(bind)到输入而不是值属性:

<div class='input-group input-append date'>
    <input type='text' class="form-control datepicker" ng-model="personName" id="{{ objID }}" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>