使用requireJS加载最新的Kendo版本时出现的问题

我试图在RequireJS中使用最新的2016.2.504，但它不工作，我用v2015.2.805进行了测试，它似乎可以工作，但无法获得相同的代码与2016.2.504工作，这样使用requireJS加载最新的Kendo版本时出现的问题

<!DOCTYPE HTML> 
<html> 
    <head> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-material.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.material.min.css" /> 

    <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.js"></script> 
    </head> 
    <body> 
    <div id="example" ng-app="KendoDemos"> 
    <div ng-controller="MyCtrl"> 
     <kendo-grid options="mainGridOptions"> 
      <div k-detail-template> 
       <kendo-tabstrip> 
       <ul> 
        <li class="k-state-active">Orders</li> 
        <li>Contact information</li> 
       </ul> 
       <div> 
        <div kendo-grid k-options="detailGridOptions(dataItem)"></div> 
       </div> 
       <div> 
        <ul> 
         <li>Country: <input ng-model="dataItem.Country" /></li> 
         <li>City: <input ng-model="dataItem.City" /></li> 
         <li>Address: {{dataItem.Address}}</li> 
         <li>Home phone: {{dataItem.HomePhone}}</li> 
        </ul> 
       </div> 
       </kendo-tabstrip> 
      </div> 
     </kendo-grid> 
    </div> 
</div> 


    <script> 
     require.config({ 
      waitSeconds:0, 
     paths: { 
      "angular": "http://kendo.cdn.telerik.com/2016.2.504/js/angular.min", 
      "jquery": "http://kendo.cdn.telerik.com/2016.2.504/js/jquery.min", 
      "kendo.all.min": "http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min" 
     }, 
     shim: { 
      "angular": { deps: ["jquery"] }, 
      "kendo.all.min": { deps: ["angular"] } 
     } 
     }); 

     require([ "angular", "kendo.all.min" ], function() { 
     var app = angular.module("KendoDemos", ["kendo.directives"]); 

     app.controller("controller", ["$scope", function($scope) { 
      $scope.mainGridOptions = { 
       dataSource: { 
        type: "odata", 
        transport: { 
         read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees" 
        }, 
        pageSize: 5, 
        serverPaging: true, 
        serverSorting: true 
       }, 
       sortable: true, 
       pageable: true, 
       dataBound: function() { 
        this.expandRow(this.tbody.find("tr.k-master-row").first()); 
       }, 
       columns: [{ 
        field: "FirstName", 
        title: "First Name", 
        width: "120px" 
        },{ 
        field: "LastName", 
        title: "Last Name", 
        width: "120px" 
        },{ 
        field: "Country", 
        width: "120px" 
        },{ 
        field: "City", 
        width: "120px" 
        },{ 
        field: "Title" 
       }] 
      }; 

      $scope.detailGridOptions = function(dataItem) { 
       return { 
        dataSource: { 
         type: "odata", 
         transport: { 
          read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" 
         }, 
         serverPaging: true, 
         serverSorting: true, 
         serverFiltering: true, 
         pageSize: 5, 
         filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID } 
        }, 
        scrollable: false, 
        sortable: true, 
        pageable: true, 
        columns: [ 
        { field: "OrderID", title:"ID", width: "56px" }, 
        { field: "ShipCountry", title:"Ship Country", width: "110px" }, 
        { field: "ShipAddress", title:"Ship Address" }, 
        { field: "ShipName", title: "Ship Name", width: "190px" } 
        ] 
       }; 
      }; 
     }]); 

     angular.bootstrap(document, ["app"]); 
     }); 
    </script> 
    </body> 
</html>

但是，像这样的工作：

<!DOCTYPE HTML> 
<html> 
    <head> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.common.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.rtl.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.default.min.css"> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.js"></script> 
    </head> 
    <body> 
    <div ng-controller="controller"> 
     <select kendo-drop-down-list k-options="options"></select> 
    </div> 

    <script> 
     require.config({ 
      waitSeconds:0, 
     paths: { 
      "angular": "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min", 
      "jquery": "http://code.jquery.com/jquery-1.9.1.min", 
      "kendo.all.min": "http://kendo.cdn.telerik.com/2016.1.406/js/kendo.all.min" 
     }, 
     shim: { 
      "angular": { deps: ["jquery"] }, 
      "kendo.all.min": { deps: ["angular"] } 
     } 
     }); 

     require([ "angular", "kendo.all.min" ], function() { 
     var app = angular.module("app", ["kendo.directives"]); 

     app.controller("controller", ["$scope", function($scope) { 
      $scope.options = { 
      dataSource: { 
       data: [{name:"Jane Doe", value: 1}, {name:"John Doe", value: 2}] 
      }, 
      dataTextField: "name", 
      dataValueField: "value" 
      }; 
     }]); 

     angular.bootstrap(document, ["app"]); 
     }); 
    </script> 
    </body> 
</html>

请帮助我，我怎么解决这个issue.Thank你这么多的帮助。的

来源

2016-05-31 Mason.Lam

app.controller("MyCtrl", ["$scope", function($scope) {

代替

app.controller("controller", ["$scope", function($scope) {

angular.bootstrap(document, ["KendoDemos"]);

代替

angular.bootstrap(document, ["app"]);

Here working example

来源

2016-05-31 11:52:28

感谢您的回答。 @Layonez Wronskey但它仍然抛出一个错误未捕获错误：[$ injector：modulerr] http://errors.angularjs.org/1.4.6/$injector/modulerr?p0=KendoDemos&p1=Error...A%2F%2Fkendo.cdn .telerik.com％2F2016.2.504％2Fjs％2Fangular.min.js％3A19％3A463） –

那不是真的，如果这两个问题都是完美无缺的话。看看道场http://dojo.telerik.com/@layonez/IMUri –

你解决了我的问题，它运作良好。但我不知道为什么浏览器抛出错误，这是一个错误？ –

使用requireJS加载最新的Kendo版本时出现的问题

回答

相关问题