0

我有这个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();
                });
            });
        }
    }
});

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

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

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

4

2 回答 2

1

您的代码中只有一个小错误，您应该在模型中使用点，只需将您的代码更改为下面，它就会起作用

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

只需使用点模型

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

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

于 2013-08-02T15:51:43.410 回答
1

The best practice to deal with the isolated scope is always have a '.' in your ng-models.

You can remove the $watch to prevent $apply to trigger multiple times. (You can see that in your code if you log something before $apply)

The date change can be easily captured by the callback function of the calender, you can change the code to:

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

于 2013-08-02T16:27:58.823 回答