角度自定義指令數據綁定

Question

我有一個表單，試圖將日期選擇器對象轉換為指令。 我能夠將數據輸入到輸入中，但是它沒有將數據與傳遞給它的作用域變量綁定在一起。 這是我的代碼。

視圖：

<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指令將模型綁定到輸入而不是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>