2

我一直在将 Angular 用于一个项目，最近在http://kendo-labs.github.io/angular-kendo/#/上发现了有关 Kendo-Angular 项目的信息。我成功地将 Angular-Kendo 添加到我的项目中，并且它的工作方式与我认为的一样，除了像我习惯的那样更新模型。

这个项目正是我正在寻找的，但是，文档中没有任何示例实际显示您能够更新 Angular 模型，以便它更新 Kendo 数据源。

下面是一段代码，例如：

$scope.data = new kendo.data.DataSource({
    data: [{
        name: "India",
        data: [10, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
    }, {
        name: "World",
        data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, 2.245, 4.339, 2.727]
    }, {
        name: "Russian Federation",
        data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, 7.832, 4.3, 4.3]
    }, {
        name: "Haiti",
        data: [0.253, 0.362, 3.519, 1.799, 2.252, 3.343, 0.843, 2.877, 5.416, 5.590]
    }]
});

使用 Angular，人们会期望做出这样的事情：

<input ng-model="data[0].data[0]" />

输入字段中的输出将是10。但是，当将此数据传递给图形并尝试更改输入框中的值时，图形不会更新。

任何对这些特定库有经验的人都知道如何实现类似的东西？这种支持是否存在？这只是一个让 Kendo 与 Angular 一起工作的库，仅此而已吗？

4

3 回答 3

2

请注意，angular-kendo 的作者和/或对 AngularJS 有更深入了解的人可能会因为我“做错了”而对我大发雷霆，但这里是：

angular-kendo 已经$watch在数据源上使用了 a ，所以如果你添加一些代码到它最初在那里做的事情中，例如像这样：

scope.$watch(attrs.kDataSource, function (mew, old) {
    if (mew !== old) {
        element.data('$kendoDataSource', toDataSource(mew, type));

        var role = element.data("role");
        var widgetType = role.charAt(0).toUpperCase() + role.slice(1);
        var w = element.data("kendo" + widgetType);;

        if (!w) {
            w = kendo.widgetInstance(element, kendo.ui);
        }

        if (w && typeof w.setDataSource === "function") {
            w.setDataSource(element.data('$kendoDataSource'));
        }
    }
}, true);

那么你正在寻找的行为有效。我不确定为什么没有实现这个（嗯，类似的，但要好得多）；对我来说，这似乎是一个核心功能，但可能有一些我不明白的原因（我还没有真正阅读这里的所有源代码）。在任何情况下，必须手动将更改事件处理程序附加到输入以更新您的 UI 对我来说似乎也不是很“有角度”。

咯咯笑的演示。免责声明：我不对任何事情负责。不要使用这个。

编辑：在查看了 angular-kendo 问题跟踪器之后，看起来他们打算做类似的事情（从@BurkeHolland 的评论来看），所以也许这不是完全错误的；我更新了演示，使其更具可读性

于 2014-01-10T21:09:36.823 回答
2

我解决了这个问题，但现在以我期望的方式。

我只是将一个更改事件绑定到输入并调用 Kendoredraw()方法，每次我的模型更新时它都会重绘。考虑到剑道为此付出了全部努力，这有点烦人。您会认为可以使用 2 路绑定。

如果存在，仍在寻找更好的答案。

于 2014-01-09T22:08:55.030 回答
1

我对这个解决方案并不疯狂，但我认为这是目前进行绑定的最佳方式。解决方案是使用 kendo.data.ObservableArray 或 kendo.data.DataSource 来支持数据网格，然后更新控制器中的 ObservableArray 或 DataSource：

angular.module('MyApp').controller('MyController', function($scope, $http) {
    $scope.products = new kendo.data.DataSource({
        data: [],            // kendo watches this array
        pageSize: 5
    });

    $http.get('data/products.json').then(function(result) {
        // update the Kendo DataSource here.
        $scope.products.data(result.data);
    });
});

HTML 如下所示：

<div kendo-grid
     k-data-source="products"
     k-selectable="'row'"
     k-columns='[{ "field": "ProductName",           "title": "Name" },
                 { "field": "Supplier.SupplierName", "title": "Supplier" },
                 { "field": "Category.CategoryName", "title": "Category" }]'
     k-sortable="true"
     k-groupable="true"
     k-filterable="true">
</div>
于 2014-04-10T19:14:21.773 回答