KendoUI ne fonctionne pas avec AngularJS routage

Question

J'ai installé les routes suivantes dans app.js fichier:

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' 
      }); 
    }); 

et mon company.html ressemble à ceci:

<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> 

Lorsque je sélectionne l'onglet de la société - ne vient sur la page.

Ma question est comment faire apparaître KendoUI Grid en utilisant les routes AngularJS. Pouvez-vous JSFiddle cela?

Merci.

Answer 1

Je suppose que vous avez deux options:

a) Nice one: Essayez d'utiliser la grille Kendo-UI dans la version AngularJS: http://demos.telerik.com/kendo-ui/grid/angular.

b) L'autre: Mettez le code que vous avez déjà dans $ (document) .ready dans un contrôleur pour cette route, ou changez $ (document) .ready pour un setTimeout. Probablement $ (document) .ready n'est pas déclenché lorsque le modèle est ajouté au DOM (similaire à AngularJS document.ready doesn't work when using ng-view). Quoi qu'il en soit, c'est une mauvaise pratique dans AngularJS d'accéder au DOM à partir d'un contrôleur.