在按钮的 ng-click 中绑定 Kendo 网格 Angular

Question

我试图在单击按钮时在 angular 中显示 Kendo 网格。 ng-click 的 GetCustomer 函数在 customerController 内。如果显示网格 init() 函数的代码是从主控制器调用的，那么它会显示数据，但不会在单击按钮时显示数据。

$scope 中的 var 保存数据，但不知何故，当从事件处理程序调用时，html 标记中的网格不会重新绘制。它仅在 html 页面的初始请求期间显示。我需要承诺什么吗？

我在控制台中没有收到任何错误，但是在单击按钮时没有使用数据重新绘制网格。任何帮助将不胜感激。

JSFiddle link.

您可以取消注释 $scope.GetCustomer 中可用的行 init() 并注释主控制器中可用的 init() 以模拟问题。

我的 html 标记

<div>
<div data-ng-controller="customerController">
    <div kendo-grid="customerGrid" k-options="customerGridOptions"></div>
    <button id="submitCustomer" class="btn btn-primary" type="button" data-ng-click="GetCustomer()">Get Customer</button>
</div>

和我的控制器代码

var app = angular.module("app", [
"kendo.directives"]);

app.controller("customerController", function ($scope) {

//init(); // this works

// I want the data to be bound to the grid on ng-click handler
$scope.GetCustomer = function () {
  init(); // this does not work
}

function init() {
    var customerData = [{
        firstName: "Joe",
        lastName: "Smith",
        status: "Active"
    }, {
        firstName: "John",
        lastName: "Smith",
        status: "Active"
    }, {
        firstName: "Travis",
        lastName: "Smith",
        status: "Expired"
    }];

    $scope.customerDataSource = new kendo.data.DataSource({
        data: customerData
    });

    console.log('binding grid');

    $scope.customerGridOptions = {
        dataSource: $scope.customerDataSource,
        selectable: "row"
    }
  }
});

Answer 1

为此，您需要使用 k-rebind 属性，该属性使网格小部件监视给定范围属性的更改。

<div kendo-grid="customerGrid" 
     k-options="customerGridOptions" 
     k-rebind="customerGridOptions"></div>

（已更新 demo）

在按钮的 ng-click 中绑定 Kendo 网格 Angular

Bind Kendo grid in Angular on button's ng-click

javascript

kendo-ui

angularjs

kendo-grid