Question

我有这个HTML：

<form name="form" novalidate data-ng-submit="TradeDaysFormSubmit()">
    <div data-ng-repeat="tradeDay in tradeDays">
        {{ tradeDay }}
        <br />
        <div inline-calender class="trade-calender-box" date="tradeDay" data-ng-model="tradeDay"></div>
    </div>
</form>

使用此控制器：

$scope.tradeDays = [];

$scope.tradeDays.push("31-01-2013");
$scope.tradeDays.push("28-02-2013");
$scope.tradeDays.push("10-03-2013");
$scope.tradeDays.push("11-04-2013");
$scope.tradeDays.push("12-05-2013");
$scope.tradeDays.push("13-06-2013");
$scope.tradeDays.push("11-07-2013");
$scope.tradeDays.push("23-08-2013");
$scope.tradeDays.push("14-09-2013");
$scope.tradeDays.push("30-10-2013");
$scope.tradeDays.push("22-11-2013");
$scope.tradeDays.push("23-12-2013");
$scope.tradeDays.push("31-01-2014");

指令：

app.directive("inlineCalender", function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            date:'='
        },
        link: function (scope, element, attributes, modelController) {
            scope.$watch('date', function (newValue) {
                if (!_.isString(newValue)) return;

                dateparts = scope.date.split('-');

                var minDate = new Date(dateparts[2], parseInt(dateparts[1]) - 1, 1);
                var maxDate = new Date(dateparts[2], parseInt(dateparts[1]), 0);

                element.datepicker({ defaultDate: scope.date, hideIfNoPrevNext: true, minDate: minDate, maxDate: maxDate });

                element.bind("change", function (event) {
                    var currentDate = element.datepicker("getDate");
                    scope.date = currentDate;
                    modelController.$setViewValue(currentDate.toString());
                    modelController.$render();
                    scope.$apply();
                });
            });
        }
    }
});

该视图显示了我所有的压光机，到目前为止一切都很好。但是，当我更改日期时，新值不会传递给模型。如你所见，在我有{{ tradeDay }}的HTML中，但是当我在日历上选择日期时，此值不会改变。

有人能告诉我这里做错了什么吗？我已经尝试过模型控制器，并使用双向绑定隔离范围，但两者都没有起作用。

Fiddle当您点击日期选择器中的日期时，上面的文字不会更新。

Answer 1

您的代码中只有一个小错误，您应该在模型中使用点，只需将代码更改为下方并且可以正常工作

http://jsfiddle.net/Qvu5u/3/

只需使用像

这样的点模型

$scope.tradeDays.push({date:'31-01-2013'});

https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 2

处理孤立范围的最佳做法是始终拥有'。'在您的ng模型中。

您可以移除$ watch以防止$ apply多次触发。（如果您在$ apply之前记录某些内容，可以在代码中看到）

日历更改可以通过日历的回调函数轻松捕获，您可以将代码更改为：

link: function (scope, element, attributes, modelController) {
    dateparts = scope.date.split('-');
    var minDate = new Date(dateparts[2], parseInt(dateparts[1]) - 1, 1);
    var maxDate = new Date(dateparts[2], parseInt(dateparts[1]), 0);
    element.datepicker({
        defaultDate: scope.date,
        hideIfNoPrevNext: true,
        minDate: minDate,
        maxDate: maxDate,
        onSelect: function (date) {
            modelController.$setViewValue(date);
            scope.date = date;
            scope.$apply();
        }
    });
}

的 Demo on jsFiddle

为什么值没有从指令中更新到视图？

2 个答案: