Question

我正在评估KendoUI在我的Angular应用程序中使用。我在使用KendoUI Gird小部件时遇到问题：我将数据源指定为我的控制器中定义的JSON数组，但我在页面上什么都没有，甚至没有空网格。

这是我的HTML：

<div>

<kendo-grid k-data-source="dataSource">

</kendo-grid>

</div>

这是我的控制器：

'use strict';

angular.module('wizardApp').controller('ApplicationGeneralWizardCtrl', ['$scope',
    function ($scope) {
            console.log('Entering ApplicationGeneralWizardCtrl');
         $scope.dataSource = new kendo.data.DataSource({
            data: [
                { id: 1, name: 'Tennis Balls', department: 'Sports', lastShipment: '10/01/2013' },
                { id: 2, name: 'Basket Balls', department: 'Sports', lastShipment: '10/02/2013' },
                { id: 3, name: 'Oil', department: 'Auto', lastShipment: '10/01/2013' },
                { id: 4, name: 'Filters', department: 'Auto', lastShipment: '10/01/2013' },
                { id: 5, name: 'Dresser', department: 'Home Furnishings', lastShipment: '10/01/2013' }

            ],
             columns:
                 [
                     { "field": "name", "title": "Name"},
                     { "field": "department", "title": "Department"},
                     { "field": "lastShipment", "title": "Last Shipment" }
                 ]
         });

    }
]);

这是我的主要app.js：

'use strict';

var app = angular.module('wizardApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'mgo-angular-wizard',
    'ngGrid',
    'kendo.directives'
]);

app.value('host', false /*use local host*/ ? "http://localhost:63428" : "http://sampleservice.breezejs.com");

app.controller('ApplicationTableCtrl', ['$scope', '$location', '$rootScope','ngGrid',
    function ($scope, $location, $rootScope) {

    }
]);

app.controller('MainCtrl',
    ['$scope',  'datacontext','$timeout','WizardHandler','$location',
        function($scope, datacontext, $timeout,WizardHandler,$location) {

            function Customer(name,number,address,contact)
            {
                this.customerName = name;
                this.customerNumber = number;
                this.customerAddress = address;
                this.customerContact = contact;
            }

            console.log('created MainCtrl');
            $scope.items = [];
//            $scope.logList = logger.logList;
//            $scope.lastLog = function(){return logger.lastLog;};

            $scope.step_1_Action = function(name,number){
                 console.log('MainCtrl : step_1_Action dataInput:  ' + name + '  ' + number);

                $scope.currentCustomer = new Customer('','','','');
                 $scope.currentCustomer.customerName = name;
                 $scope.currentCustomer.customerNumber = number;
                    }
            $scope.step_2_Action = function(address,contact){
                console.log('MainCtrl : step_2_Action dataInput:  ' + address + '   ' + contact);
                $scope.currentCustomer.customerAddress = address;
                $scope.currentCustomer.customerContact = contact;
                    }
            $scope.saveCustomerRecord = function(){
                 datacontext.addCustomer($scope.currentCustomer);
                 datacontext.commit();
                $scope.currentCustomer = new Customer('','','','');
                 //$scope.step1Form.$setPristine();
                 $scope.currentCustomer = {};
                 WizardHandler.wizard().goTo(0);
            }


        }]

);

app
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
        .when('/IntroductionWizard', {
            templateUrl: 'views/Wizards/IntroductionWizard/IntroductionWizard.html',
            controller: 'IntroductionWizardCtrl'
        })
        .when('/ApplicationGeneralWizard', {
            templateUrl: 'views/Wizards/ApplicationGeneralWizard/ApplicationGeneralWizard.html',
            controller: 'ApplicationGeneralWizardCtrl'
        })
      .otherwise({
        redirectTo: '/'
      });
  }).run(
    function ($rootScope, $location) {
        $rootScope.go = function (path) {
            $location.path(path);
        }
    });

这是我的index.html：

<!doctype html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="styles/main.css">



    <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="kendo.all.min.js"></script>
    <script src="angular-kendo.js"></script>

    <link href="styles/kendo.common.min.css" rel="stylesheet">
    <link href="styles/kendo.default.min.css" rel="stylesheet">

  </head>
  <body ng-app="wizardApp">

    <div class="container" ng-view=""></div>
    <script src="bower_components/underscore/underscore.js"></script>




    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>


    <!-- Breeze: -->
    <script src="scripts/q.min.js"></script>
    <script src="scripts/breeze.min.js"></script>
    <script src="scripts/breeze.angular.js"></script>
    <script src="scripts/breeze.metadata-helper.js"></script>

    <!-- ng-grid: -->

    <script src="bower_components/ng-grid/build/ng-grid.debug.js"></script>
    <link rel="stylesheet" href="bower_components/ng-grid/ng-grid.css" />
    <link rel="stylesheet" href="styles/style.css" />

    <!-- the actual app: -->

        <script src="scripts/app.js"></script>
        <script src="scripts/model.js"></script>
        <script src="scripts/datacontext.js"></script>
        <script src="scripts/metadataFactory.js"></script>



        <script src="scripts/controllers/introductionWizard.js"></script>
        <script src="scripts/controllers/applicationGeneralWizard.js"></script>
        <script src="scripts/controllers/KendoGridDemoController.js"></script>

        <script src="scripts/ngLogger.js"></script>
        <script  src="bower_components/angular-wizard/dist/angular-wizard.js"></script>
        <link rel="stylesheet" href="bower_components/angular-wizard/dist/angular-wizard.css">
</body>
</html>

我做错了什么，以及'Angular-Kendo'的做法是什么？

Answer 1

基本上你做得很好，我唯一能想到的是使用new kendo.data.DataSource({})，你不需要创建一个新实例，因为你已经使用了Kendo ui指令为你创建它（虽然使用这个代码也是有效的），另一件事是我们有时忘记正确地将第三方库添加到角度。

function ctrl($scope){
         $scope.dataSource = {
            data: [
                { id: 1, name: 'Tennis Balls', department: 'Sports', lastShipment: '10/01/2013' },
                { id: 2, name: 'Basket Balls', department: 'Sports', lastShipment: '10/02/2013' },
                { id: 3, name: 'Oil', department: 'Auto', lastShipment: '10/01/2013' },
                { id: 4, name: 'Filters', department: 'Auto', lastShipment: '10/01/2013' },
                { id: 5, name: 'Dresser', department: 'Home Furnishings', lastShipment: '10/01/2013' }

            ],
             columns:
                 [
                     { "field": "name", "title": "Name"},
                     { "field": "department", "title": "Department"},
                     { "field": "lastShipment", "title": "Last Shipment" }
                 ]
         };
}

实例：http://jsfiddle.net/choroshin/Ysxa6/2/

使用AngularJS使用KendoUI网格时遇到问题

1 个答案: