Question

我在app.js文件中设置了以下路由：

var loginApp = angular.module('loginApp', ['ui.router']);

    loginApp.config(function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/login');
        $stateProvider

            // Login view
            .state('login', {
                url: '/login',
                templateUrl: 'templates/login.html'
            })

            // Company view
            .state('company', {
                url: '/company',
                templateUrl: 'templates/company.html'
            });
    });

我的company.html看起来像这样：

<div id="grid"></div>
<script>
    $(document).ready(function () {
        var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
                dataSource = new kendo.data.DataSource({
                    transport: {
                        read:  {
                            url: crudServiceBaseUrl + "/Products",
                            dataType: "jsonp"
                        },
                        update: {
                            url: crudServiceBaseUrl + "/Products/Update",
                            dataType: "jsonp"
                        },
                        destroy: {
                            url: crudServiceBaseUrl + "/Products/Destroy",
                            dataType: "jsonp"
                        },
                        create: {
                            url: crudServiceBaseUrl + "/Products/Create",
                            dataType: "jsonp"
                        },
                        parameterMap: function(options, operation) {
                            if (operation !== "read" && options.models) {
                                return {models: kendo.stringify(options.models)};
                            }
                        }
                    },
                    batch: true,
                    pageSize: 20,
                    schema: {
                        model: {
                            id: "ProductID",
                            fields: {
                                ProductID: { editable: false, nullable: true },
                                ProductName: { validation: { required: true } },
                                UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                Discontinued: { type: "boolean" },
                                UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                            }
                        }
                    }
                });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            height: 550,
            toolbar: ["create"],
            columns: [
                "ProductName",
                { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
                { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
                { field: "Discontinued", width: "120px" },
                { command: ["edit", "destroy"], title: " ", width: "200px" }],
            editable: "inline"
        });
    });
</script>

当我选择公司标签时 - 页面上没有任何内容。

我的问题是如何使用AngularJS路线显示KendoUI网格。你可以把它弄成这个吗？

感谢。

Answer 1

我猜你有两个选择：

a）不错的一个：尝试在AngularJS版本中使用Kendo-UI网格：http://demos.telerik.com/kendo-ui/grid/angular。

b）另一个：将您已经在$（document）.ready中的代码放在该路由的控制器中，或者为setTimeout更改$（document）.ready。将模板添加到DOM时可能不会触发$（document）.ready（类似于AngularJS document.ready doesn't work when using ng-view）。无论如何，在AngularJS中从控制器访问DOM是一种不好的做法。

KendoUI不使用AngularJS Routing

1 个答案: