Fatal编程技术网
  • angularjs/
  • Angularjs 数据绑定不适用于angular JS指令中的剑道网格

Angularjs 数据绑定不适用于angular JS指令中的剑道网格

angularjs

Angularjs 数据绑定不适用于angular JS指令中的剑道网格,angularjs,angularjs-directive,kendo-grid,Angularjs,Angularjs Directive,Kendo Grid,我对angular js和剑道UI不熟悉。这是我的礼物 我有一个指令，希望将数据绑定到剑道网格 Script.js-模块、控制器和指令的代码 (function(){ angular.module('app', ['kendo.directives']); angular.module('app').controller('MyCtrl',function($scope){ var data = { accountlist: [

我对angular js和剑道UI不熟悉。这是我的礼物

我有一个指令，希望将数据绑定到剑道网格

Script.js-模块、控制器和指令的代码

(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代码：

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


你好，普朗克！
为什么我看不到剑道格网？

这很可能是版本之间的冲突

您可以了解哪些版本可以一起工作

例如，它指出最新的主要版本剑道UI 2015.3.930（2015年第三季度）支持AngularJS 1.4.0+。不确定它是否向后兼容，但您可以随时尝试

如果您需要Angular 1.3.6，则应使用剑道UI 2015.2.624（2015年第二季度）：
演示：

您的Plunker中缺少
ng应用程序
和
ng控制器
。哦。。我错过了基本的东西。我已经在plunk中更新了这个。仍然无法看到数据。将查看一些控制台错误“m不是函数”。您是否需要使用特定版本的Angular或Kendo？是的。angular 1.3.6和剑道的任何最新版本。这对你有用吗？ 
<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>