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 datepicker で日付をクリックしても、上記のテキストは更新されません。

4

2 に答える 2

1

分離されたスコープに対処するためのベスト プラクティスは、常に「.」を使用することです。あなたの ng-models で。

$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

于 2013-08-02T16:27:58.823 に答える
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 に答える