在angularJS中，爲什麼我的模型在將輸入鏈接到日期選擇器時未更新？

我有點迷路了。我定義了一個角度指令，該指令創建一個日期選擇器（由eternicode（https://github.com/eternicode/bootstrap-datepicker/）啓動日期選擇器）：在angularJS中，爲什麼我的模型在將輸入鏈接到日期選擇器時未更新？

datepicker似乎在視覺上工作。它彈出，並在我的文本框中添加一個值。但角度模型不會更新，除非我手動編輯文本框。

我的指令：

myApp.directive('ccDatePicker', function ($compile) { 
    return { 
     restrict: 'EA', 
     template: '<input type="text" ng-model="ngModel" />', 
     require: '^ngModel', 
     scope: { 
      ngModel: '=' 
     }, 
     replace: false , 
     link: function (scope, element, attrs) { 
      element.children(0) 
       .on('change', function() { scope.$digest(); }) 
       .datepicker({ format: 'yyyy/mm/dd', autoclose: true }); 
     } 
    }; 
});

我的HTML：

<label>Due date: <cc-date-picker ng-model="todoObject.dueBy" /></label> 

<div> 
    dueBy: {{todoObject.dueBy}} (updates when editing textbox by hand, but not when using date picker) 
</div>

我使用範圍$消化刷新模式，我也試過範圍$申請。沒有運氣。

當用戶在日期選擇器中選擇日期時，如何獲取角度模型更新？

來源

2014-02-23 willem

我試圖製作基於jQuery插件的日期選擇器指令時出現類似的問題，因爲datepikcer的onSelect()事件發生在角度世界之外，並且沒有引發任何通知，所以您需要調用$scope.$apply()強制摘要讓角度知道它應該更新模型值：

onSelect: function (date) { 
    scope.$apply(function() { 
     ngModelCtrl.$setViewValue(date); 
    }); 
}

此外，在您發佈的片斷，我沒有看到你設置模型值，因此該行：

ngModelCtrl.$setViewValue(date);

編輯

我做了演示a plunk需要做什麼。在不相關的說明中，爲什麼不使用angular-ui datepicker？

來源

2014-02-23 16:48:55

感謝Plunker代碼！有密切看看現在... – willem

關於角度日期選擇器，沒有理由除了無知:) – willem

-2

如果先設置dueBy日期（如

$scope.todoObject={dueBy:"04/27/2015"};

如何使下拉列表顯示的初始值，當它第一次顯示？

http://plnkr.co/edit/xOzfQOOMe1GFoB1tfQiF?p=preview

來源

2015-05-12 09:55:24 user1220617

在angularJS中，爲什麼我的模型在將輸入鏈接到日期選擇器時未更新？

回答

相關問題