javascript - 如何让 AngularJS 和 KendoUI 协调工作？

Question

我分阶段设置了 .Net MVC 解决方案，并确保 Angular JS 和 KendoUI 独立工作。

app.js:

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

在我的 Controller 中，我定义了以下内容:

app.controller('contentTypesController', ['$scope', '$log', 'contentTypesRepository',
    function ($scope, $log, contentTypesRepository) {

        var a = {};

        $scope.status;
        $scope.contentTypes;

        $scope.contentTypeOptions;

        // for testing purposes, but not used - used for navigation properties
        $scope.users;

        getContentTypes();

        function getContentTypes() {
            // call the data repository
            contentTypesRepository.getList()
                .success(function (contentTypes) {
                    //console.log(contentTypes.value[0].Description);
                    //$log.log(contentTypes.value[0].Description)
                    $scope.contentTypes = contentTypes;
                    $scope.contentTypeOptions = {
                        dataSource: {
                            data: contentTypes
                        },
                        dataTextField: "Description",
                        dataValueField: "ContentTypeId",
                        optionLabel: "Select a Content Type"
                    };

                })
                .error(function (error) {
                    $scope.status = 'Unable to load data: ' + error.message;
                });
        }

        $scope.updateContentTypes = function (id) {
            var contentType;

            for (var i = 0; i < $scope.contentTypes.length; i++) {
                var currentType = $scope.contentTypes[i];
                if (currentType.ID === id) {
                    contentType = currentType;
                    break;
                }
            }
        };

        $scope.insertContentType = function () {
            // get contentType description from the client
            var contentType = { 'Description': $scope.newContentType };

            contentTypesRepository.insert(contentType)
                .success(function () {
                    $scope.status = 'Added new content type.  Refreshing list.';
                    // add the new content type to the client-side collection
                    $scope.contentTypes.value.push(
                                    { 'Description': $scope.newContentType }
                                );
                    $scope.newContentType = "";
                })
                .error(function (error) {
                    $scope.status = 'Unable to insert new content type: ' + error.message;
                });
        };

        $scope.deleteContentType = function(id) {
            contentTypesRepository.remove(id)
                .success(function () {
                    $scope.status = 'Deleted content type.  Refreshing list.';
                    for (var i = 0; i < $scope.contentTypes.length; i++) {
                        var contentType = $scope.contentTypes[i];
                        if (contentType.ID === id) {
                            // remove the content type from the client-side collection
                            $scope.contentTypes.splice(i, 1);
                            break;
                        }
                    }
                    // navigation properties = null
                    // $scope.xxxx = null;
                })
                .error(function (error) {
                    $scope.status = 'Unable to delete content type: ' + error.message;
                });
        };

        // get some navigation property
        //$scope.getCustomerOrders = function (id) {
        //    dataFactory.getOrders(id)
        //    .success(function (orders) {
        //        $scope.status = 'Retrieved orders!';
        //        $scope.orders = orders;
        //    })
        //    .error(function (error) {
        //        $scope.status = 'Error retrieving customers! ' + error.message;
        //    });
        //};


        $scope.addContentType = function () {

            //return $scope.newContentType.$save();
            $scope.contentTypes.value.push(
                { 'Description': $scope.newContentType }
            );
            $scope.newContentType = "";
        }

遵循 Angluar/Kendo 示例 here ，我添加了与 $scope.contentTypeOptions 相关的代码。

在我看来:

<select kendo-drop-down-list k-options="contentTypeOptions"></select>

显示下拉列表，但没有数据。

我能够在 ng-repeater 中查看数据:

                        <ul>
                            <li ng-repeat="contentType in contentTypes.value">
                                {{ contentType.Description }}
                            </li>
                        </ul>

以及{{ contentTypeOptions }}的原始数据。

由于转发器使用 contentTypes.value，所以我也尝试了这个

                    $scope.contentTypeOptions = {
                        dataSource: {
                            data: contentTypes.value  // tried both contentTypes and contentTypes.value
                        },
                        dataTextField: "Description",
                        dataValueField: "ContentTypeId",
                        optionLabel: "Select a Content Type"
                    };

...基于 JSON 数据:

最终，我希望将所有 CRUD 连接到网格(我过去使用 OData 完成过，但现在将 AngularJS 添加到混合中)，并且认为简单地在 Angular/Kendo 混合中显示数据就可以了是一个好的开始。我希望在确定这一点后，剩下的事情会很简单，并感谢任何建议。

Answer 1

您的代码有点令人困惑，因为像 $scope.updateContentTypes 这样的方法将 $scope.contentTypes 视为数组，但同时 contentTypes code> 似乎是一个具有属性 value 的对象，该属性是一个数组。

需要注意的一件事是 Kendo UI 小部件会在内部将您的数组转换为 Kendo 数据源。这意味着您对 $scope.contentTypes 所做的更改不会影响 $scope.contentTypeOptions 中数据源中的项目。

另一个问题是，Angular-kendo 中的小部件和数据源之间没有完整的双向绑定(bind)，直到最近，数据源根本不会更新，除非您专门将其声明为 DataSource。据我所知，最近已经有了一些改进，尽管它仍然没有完全集成。 (您可以尝试自己创建对数据的深度监视，但这可能会产生性能问题；请参阅此处的 related 帖子)。

您的下拉列表不显示数据，因为您在创建小部件后替换了 $scope.contentTypeOptions，并且该属性上没有 $watch 可以更新带有这些选项的小部件。 您可以显式创建一个数据源并使用以下命令更新它:

$scope.contentTypeOptions.dataSource.data(contentType.value);

或者您可以使用属性:

k-data-source="contentTypes" 

这将在 $scope.contentTypes 上创建一个 $watch，因此当您替换它时，小部件也会更新。

也许这个基本的(虽然确实有点困惑)example 会对您有所帮助(我以与您相同的方式设置第二个下拉列表；“更改”按钮更新数据源)。