数据绑定不与角JS指令剑道电网工作 [英] Databinding is not working with kendo grid in angular JS directives
问题描述
我是新来的角js和剑道UI。这里是我的普拉克普拉克
I am new to angular js and kendo UI. Here is my plunk Plunk
我有一个指令,并想将数据绑定到剑道电网。
I have a directive and want to bind data to the kendo grid.
的script.js - code的模块,控制器和指导
Script.js - code for module, controller and directive.
(function(){
angular.module('app', ['kendo.directives']);
angular.module('app').controller('MyCtrl',function($scope){
var data = {
accountlist: [
{accountnumber: '123456', accountname: 'Firm 1'},
{accountnumber: '111111', accountname: 'Firm 2'},
{accountnumber: '1234567', accountname: 'Firm 3'},
{accountnumber: '1234568', accountname: 'Firm 4'},
{accountnumber: '1234569', accountname: 'Firm 5'}
]};
$scope.ds = data;
});
angular.module('app').directive('mydir', function(){
return {
restrict: 'E',
scope:{
ds:'='
},
controller:function($scope){},
templateUrl: 'dir.html',
link: function(scope, element, attrs, fn) {
$('#accountlistgrid').kendoGrid({
dataSource:{
data: scope.ds.accountlist
},
selectable: true,
columns: [
{
field: "accountnumber",
title: "Account"
},
{
field: "accountname",
title: "Firm Name"
}
]
});
}
}});
}());
HTML code:
HTML code:
<head>
<link data-require="kendoUI@*" data-semver="2014.2.716" rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" />
<link data-require="kendoUI@*" data-semver="2014.2.716" rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" />
<script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angularjs@1.3.6" data-semver="1.3.6" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.6/angular.min.js"></script>
<script data-require="kendoUI@*" data-semver="2014.2.716" src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div>
<mydir ds='ds'></mydir>
</div>
</body>
为什么我不能看到剑道格?
Why I am not able to see kendo grid?
推荐答案
这是最有可能的版本之间有冲突。
It's most likely a conflict between versions.
您可以了解哪些版本共同努力<一个href=\"http://docs.telerik.com/kendo-ui/intro/installation/$p$prequisites#supported-angularjs-versions\"相对=nofollow>这里。
You can read about which versions work together here.
例如,它指出,最新的主要版本剑道UI 2015.3.930(Q3 2015)支持 AngularJS 1.4.0 + 。不知道是否是向后兼容的,但你总是可以试试。
For example, it states that the latest major release Kendo UI 2015.3.930 (Q3 2015) supports AngularJS 1.4.0+. Not sure if it's backwards compatible, but you can always try.
如果您需要角1.3.6应以其他方式使用剑道UI 2015.2.624(Q2 2015):
If you need Angular 1.3.6 you should otherwise use Kendo UI 2015.2.624 (Q2 2015):
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.6/angular.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.624/js/kendo.all.min.js"></script>
演示: http://plnkr.co/编辑/ PfVJjA55kL6l9fEMl8uX?p = preVIEW
这篇关于数据绑定不与角JS指令剑道电网工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!