Kendo 在模板之间切换时，k-data-source 未绑定

Question

有什么方法可以强制 kendo 小部件绑定到 $scope 中的某些数据。我很难让 k-data-source 在模板加载之间绑定。

具体来说，在 angular 中的模板之间切换时，下方 kendo 网格中的 k-data-source 不会绑定到 $scope.gridData。但是，当我刷新页面时它会绑定。承诺确实解决了，data.data 确实对两种类型的负载都保持了我的承诺。任何见解将不胜感激。

p.s k-data-source not binding 这个问题不影响k-columns bind。 k 列绑定，无论 angular.

中的整页加载或模板加载如何

<div kendo-grid="gridK"
k-data-source="gridData"
k-columns="gridColumns"
k-selectable="false"
></div>

.controller('view2Controller', function($scope, tableData) {


//Kendo Grid Data
var promiseGridData = tableData.getData();
promiseGridData.then(function(data){

  $scope.gridData = new kendo.data.ObservableArray(data.data);

});



//Kendo Grid Columns
$scope.gridColumns = [
    {field: "degree", title: "Degree/Certificate Name"},
    {field: "license", title: "License Status"},
    {field: "seekingHelp", title: "Seeking Help"}
];

});


mainView.service('tableData', ['$http', '$q', function($http, $q){

var deferred = $q.defer();
$http.get("../gData.json").then(function(data){

   deferred.resolve(data);
});

this.getData = function()
{   
    return deferred.promise;
}
}]);

如果有人想测试的话，这里是应用程序

https://github.com/ssohal/Kendo

您会注意到 kendo 网格在第一个页面加载时加载，但在模板之间切换后，它将停止绑定到其数据。

Answer 1

这是您的 mainView 应用模块的路由配置...

var mainView = angular.module('mainView', ['ngRoute', "mainView.educationTraining" ]);

mainView.config(["$routeProvider", function($routeProvider){

$routeProvider

    .when('/view2.html', {
        templateUrl: '../Views/view2.html',
        controller: 'view2Controller'
    })

    .otherwise({redirectTo: "../Views/index.html"});

}]);

...这是您的 mainView.educationTraining 模块的路由配置...

angular.module('mainView.educationTraining', ['ngRoute', 'kendo.directives'])

    .config(['$routeProvider', function($routeProvider) {
    $routeProvider.when("/educationandTraining", {
        templateUrl: "../views/view2.html",
        controller: "educationAndtraining"
    });

}])

第一个引用了 view2Controller，上面有一个 gridData 的实例。第二个引用 educationAndtraining 作为控制器。据我所知，您还没有在 github 示例中包含第二个控制器的定义，所以我在黑暗中拍摄了一点。

我假设 'switching templates' 是指在 /view2.html 和 /educationAndtraining 网址之间导航。

如果 educationAndtraining 控制器也没有公开 gridData 的实例，那么当导航到 /educationAndtraining 时，您的网格将没有任何东西可以绑定到视图现在将在 educationAndtraining 控制器的 $scope.

上下文中

如果这不正确，请为您的 educationAndtraining 控制器添加一个定义...

我假设您依赖的是 mainView 控制器的 $scope 属性在 educationAndtraining 控制器的 $scope 中的继承。

这适用于这种情况...

<div ng-controller="mainView">
   <div ng-controller="educationAndtraining">
   </div>
</div>

...但不一定是您的情况。我认为这是因为您的控制器是在完全不同的模块中声明的。

我在 github 上的示例中也看不到您的标记，因此请添加更多详细信息。

您可以通过将服务注入两个控制器并在该服务中保存 gridData 的单一真实来源来解决这个问题。

如果您能在简化的 fiddle 中重现该问题，那将是最好的。

Answer 2

我设置可观察数组的时间太晚了。以下作品：

.controller('view2Controller', function($scope, tableData) {


//Kendo Grid Data
var promiseGridData = tableData.getData();
promiseGridData.then(function(data){

 var arrayhold = data.data;

//Pushes the resolved promise data to kendo observable array
for (var i = 0; idx < arrayhold.length; i++) {
    $scope.gridData.push(arrayhold [i]);
 }

});

observable 数组现在在之外，因此较早创建了 promise。当 promise 被解析时，这个数组将填充并绑定到 $scope。

$scope.gridData = new kendo.data.ObservableArray([]);

//Kendo Grid Columns
$scope.gridColumns = [
{field: "degree", title: "Degree/Certificate Name"},
{field: "license", title: "License Status"},
{field: "seekingHelp", title: "Seeking Help"}
];

});

Kendo 在模板之间切换时，k-data-source 未绑定

Kendo k-data-source not binding when switching between templates

javascript

kendo-ui

angularjs

kendo-grid