使用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你这么多的帮助。的
答
app.controller("MyCtrl", ["$scope", function($scope) {
代替
app.controller("controller", ["$scope", function($scope) {
angular.bootstrap(document, ["KendoDemos"]);
代替
angular.bootstrap(document, ["app"]);
感谢您的回答。 @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 –
你解决了我的问题,它运作良好。但我不知道为什么浏览器抛出错误,这是一个错误? –