Angular 自定义指令数据绑定答案

【问题标题】：Angular Custom Directive Data BindingAngular 自定义指令数据绑定
【发布时间】：2015-07-02 20:55:31
【问题描述】：

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

查看：

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

任何帮助将不胜感激。

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

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

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

【讨论】：