你可以在 Fiddle 中设置项目吗?
Could you to set project in Fiddle?
此代码在 WebStorm 中有效,但在 jsfiddle 中无效:https://jsfiddle.net/fazcen8n/6
报如下错误:
错误:[$injector:nomod] 模块 'app' 不可用!您要么拼错了模块名称,要么忘记加载它。如果注册模块,请确保将依赖项指定为第二个参数。
(function() {
'use strict';
angular
.module('app')
.controller('cc', controller);
controller.$inject = ['$scope', '$q'];
function controller($scope, $q) {
var dataSource = new kendo.data.DataSource({
dataType: "jsonp",
transport: {
read: function(options) {
readData2(options).then(
function(data, status, headers, config) {
console.log(data);
options.success(data);
});
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
}
},
batch: false,
pageSize: 10,
serverPaging: true,
serverSorting: true,
schema: {
data: function(data) {
return data.data;
},
total: function(data) {
$scope.filtered = true;
$scope.selectAll = false;
$scope.totalRows = data.total;
$scope.trimRows = (data.total === 1 ? "row" : "rows");
return data.total;
},
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
}
}
}
}
}
});
$scope.objTrim = 'Client Summary Report';
$scope.columns2 = [
"ProductName",
{
field: "id",
attributes: {
'class': 'text-right'
},
format: '{0:n0}',
width: 110,
footerTemplate: '<div class="text-right">6666</div>'
},
{
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}",
width: 120
},
{
field: "UnitsInStock",
title: "Units In Stock",
width: 120
},
{
field: "Discontinued",
width: 120
}
];
$scope.gridOptions2 = {
scrollable: true,
dataSource: dataSource,
sortable: true,
resizable: true,
selectable: "multiple, cell"
};
function readData2(options) {
console.log("QUERY!! ");
var d = [{
id: 23333,
ProductID: 23333,
ProductName: 2333,
Discontinued: 6666,
UnitPrice: 23333,
UnitsInStock: 38383
},
{
id: 23333,
ProductID: 23333,
ProductName: 2333,
Discontinued: 6666,
UnitPrice: 23333,
UnitsInStock: 38383
},
{
id: 23333,
ProductID: 23333,
ProductName: 2333,
Discontinued: 6666,
UnitPrice: 23333,
UnitsInStock: 38383
},
];
return $q.when(true).then(function() {
return {
data: d
};
});
};
window.setTimeout(function() {
var grid = $("#grid2").data("kendoGrid");
var columns = grid.getOptions().columns;
columns[1].footerTemplate = "900000000000";
grid.setOptions({
columns: columns
});
}, 2000);
$scope.gridOptions2.dataSource.read();
}
})();
删除 html 中的 <div ng-app='app'>
并在您的 js 模块中添加 []:
angular.module('app', [])
这是一个有效的 Fiddle
添加
angular.module('app', []);
在 'use strict';
行之后。
注意:
您需要先定义模块,然后再为其创建控制器。
此代码在 WebStorm 中有效,但在 jsfiddle 中无效:https://jsfiddle.net/fazcen8n/6
报如下错误:
错误:[$injector:nomod] 模块 'app' 不可用!您要么拼错了模块名称,要么忘记加载它。如果注册模块,请确保将依赖项指定为第二个参数。
(function() {
'use strict';
angular
.module('app')
.controller('cc', controller);
controller.$inject = ['$scope', '$q'];
function controller($scope, $q) {
var dataSource = new kendo.data.DataSource({
dataType: "jsonp",
transport: {
read: function(options) {
readData2(options).then(
function(data, status, headers, config) {
console.log(data);
options.success(data);
});
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
}
},
batch: false,
pageSize: 10,
serverPaging: true,
serverSorting: true,
schema: {
data: function(data) {
return data.data;
},
total: function(data) {
$scope.filtered = true;
$scope.selectAll = false;
$scope.totalRows = data.total;
$scope.trimRows = (data.total === 1 ? "row" : "rows");
return data.total;
},
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
}
}
}
}
}
});
$scope.objTrim = 'Client Summary Report';
$scope.columns2 = [
"ProductName",
{
field: "id",
attributes: {
'class': 'text-right'
},
format: '{0:n0}',
width: 110,
footerTemplate: '<div class="text-right">6666</div>'
},
{
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}",
width: 120
},
{
field: "UnitsInStock",
title: "Units In Stock",
width: 120
},
{
field: "Discontinued",
width: 120
}
];
$scope.gridOptions2 = {
scrollable: true,
dataSource: dataSource,
sortable: true,
resizable: true,
selectable: "multiple, cell"
};
function readData2(options) {
console.log("QUERY!! ");
var d = [{
id: 23333,
ProductID: 23333,
ProductName: 2333,
Discontinued: 6666,
UnitPrice: 23333,
UnitsInStock: 38383
},
{
id: 23333,
ProductID: 23333,
ProductName: 2333,
Discontinued: 6666,
UnitPrice: 23333,
UnitsInStock: 38383
},
{
id: 23333,
ProductID: 23333,
ProductName: 2333,
Discontinued: 6666,
UnitPrice: 23333,
UnitsInStock: 38383
},
];
return $q.when(true).then(function() {
return {
data: d
};
});
};
window.setTimeout(function() {
var grid = $("#grid2").data("kendoGrid");
var columns = grid.getOptions().columns;
columns[1].footerTemplate = "900000000000";
grid.setOptions({
columns: columns
});
}, 2000);
$scope.gridOptions2.dataSource.read();
}
})();
删除 html 中的 <div ng-app='app'>
并在您的 js 模块中添加 []:
angular.module('app', [])
这是一个有效的 Fiddle
添加
angular.module('app', []);
在 'use strict';
行之后。
注意:
您需要先定义模块,然后再为其创建控制器。