Question

我在这里有点失落。我定义了一个角度指令，它创建了一个datepicker（eternicode（https://github.com/eternicode/bootstrap-datepicker/）引导的datepicker）：

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>

我使用了范围。$ digest来刷新模型，我也尝试了范围。$ apply。没有运气。

当用户在日期选择器中选择日期时，如何让我的角度模型更新？

Answer 1

我在尝试根据jQuery插件制作一个datepicker指令时遇到了类似的问题，因为datepikcer的onSelect()事件发生在角度世界之外并且没有引发通知，你需要调用{{1}强制使用摘要让angular知道它应该更新模型值：

$scope.$apply()

同样在你发布的片段中，我看不到你在哪里设置模型值，因此这一行：

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

修改

我让a plunk展示了需要做什么。在一个不相关的说明中，为什么不使用angular-ui datepicker？

Answer 2

如果您先设置dueBy日期（例如

）

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

如何让下拉列表在首次显示时显示初始值？

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

在angularJS中，为什么在将输入链接到日期选择器时我的模型没有更新？

2 个答案: