数据绑定不适用于角度 JS 指令中的剑道网格答案

【问题标题】：Databinding is not working with kendo grid in angular JS directives数据绑定不适用于角度 JS 指令中的剑道网格
【发布时间】：2015-11-13 10:54:18
【问题描述】：

我是 Angular js 和剑道 UI 的新手。这是我的笨拙Plunk

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

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>

为什么我看不到剑道网格？

【问题讨论】：

您的 Plunker 中缺少 ng-app 和 ng-controller。
哦.. 我错过了基本的东西。我已经用 plunk 更新了这个。还是看不到数据。一些控制台错误'm 不起作用'
去看看。您是否需要使用特定版本的 Angular 或 Kendo？
是的。 angular 1.3.6 和任何最新版本的剑道。
这对你有用吗？

标签： angularjs angularjs-directive kendo-grid

【解决方案1】：

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

您可以了解哪些版本可以一起使用here。

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

如果您需要 Angular 1.3.6，您应该使用 Kendo UI 2015.2.624（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/edit/PfVJjA55kL6l9fEMl8uX?p=preview

【讨论】：