角度自定义指令数据绑定

时间:2015-07-02 20:55:32

标签: javascript angularjs angularjs-directive

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

查看:

<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>

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

使用ngModel指令将模型绑定到输入而不是value属性:

<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>