Question

请考虑下面的部分视图和下面的控制器。在日期选择器元素上的ng-change事件中，调用的函数会更改定义另一个函数的上限或下限的值。

我知道我需要重新绘制kendo datepicker才能看到更新后的值，并且我应该在指令中执行此操作，但我的有限经验让我陷入困境。我假设$ scope。$ apply（）在更新范围之后调用会这样做，但它没有做到这一点。

我应该如何以Angular的方式做到这一点？

// Home View
<button id="date-button" type="button" kendo-button ng-click="showModal();">
    Variance Analysis
    <br />
</button>
<div id="spinner" class="loading" style="display:none;">
    <div class="loading-dot"></div>
    <div class="loading-dot"></div>
    <div class="loading-dot"></div>
    <div class="loading-dot"></div>
</div>

<div class="row">
    <br />
    <br />
    <br />
    <div class="col-lg-6 col-lg-offset-3">
        <h1>Select Two Months to Compare</h1>
        <br />
        <br />
        <br />
        <div class="col-lg-6">
            <input kendo-date-picker ng-model="dates.fromDate" k-ng-model="dates.actualFromDate" k-options="datePicker1Options();" ng-change="setMaxDate();" />
        </div>
        <div class="col-lg-6">
            <input kendo-date-picker ng-model="dates.untilDate" k-ng-model="dates.actualUntilDate" k-options="datePicker2Options();" ng-change="setMinDate();" />
        </div>
        <div class="row">
            <br />
            <br />
            <br />
            <div class="col-lg-2 col-lg-offset-4">
                <button kendo-button ng-click="go();" style="width:100%;">Go</button>
            </div>
        </div>
    </div>
</div>




// Home Controller
app.controller('HomeCtrl', ['$scope', '$http', '$location', 'data', function ($scope, $http, $location, data) {
    $scope.dates = {};
    $scope.dates.untilDate;
    $scope.dates.fromDate;
    $scope.dates.actualUntilDate;
    $scope.dates.actualFromDate;

    $scope.minDate =  new kendo.data.ObservableObject({
        date: new Date(1970)
    });

    $scope.maxDate = new kendo.data.ObservableObject({
        date: new Date()
    });

    $scope.setMaxDate = function () {
        var date = new Date($scope.dates.actualFromDate);
        date.setMonth(date.getMonth() + 1);
        $scope.maxDate.date = date;
        // $scope.$apply();
    }

    $scope.setMinDate = function() {
        var date = new Date($scope.dates.actualUntilDate);
        date.setMonth(date.getMonth() - 1);
        $scope.minDate.date = date;
        // $scope.$apply();
    }


    $scope.datePicker1Options = function () {
        return {
            animation: {
                close: {
                    effects: "fadeOut zoom:out",
                    duration: 300
                },
                open: {
                    effects: "fadeIn zoom:in",
                    duration: 300
                }
            },
            format: "MMM yyyy",
            start: "year",
            depth: "year",
            min: $scope.minDate.date
        }
    }


    $scope.datePicker2Options = function () {
        return {
            animation: {
                close: {
                    effects: "fadeOut zoom:out",
                    duration: 300
                },
                open: {
                    effects: "fadeIn zoom:in",
                    duration: 300
                }
            },
            format: "MMM yyyy",
            start: "year",
            depth: "year",
            max: $scope.maxDate.date
        }
    }

    $scope.go = function () {
        data.fetch($scope.dates.fromDate, $scope.dates.untilDate, $http, $location);
    }


}]);

Answer 1

查看源代码，因为angular-kendo不使用双向绑定，所以k-rebind是你所追求的，但k-rebind似乎超级错误，并且不断发送任何内容测试我做了一个无限的摘要循环。最好与作者讨论。

另外，我认为你的两个日期选择器存在一个逻辑错误。我假设FromDate应该实际设置MinDate，这将更新min的{{1}}选项

Answer 2

我在使用$ scope。$ apply（）或html中的k-rebind属性尝试刷新Kendo网格时遇到类似问题。前者正在返回“摘要已在进行中”错误，后者在某种程度上以某种内存问题杀死了Chrome。

Angular-Kendo和$ scope。$ apply（）

2 个答案: