Question

我是角度js和kendo UI的新手。这是我的插件Plunk

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

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

为什么我无法看到kendo网格？

Answer 1

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

您可以阅读哪些版本协同工作here。

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

如果你需要Angular 1.3.6，你应该使用Kendo UI 2015。2。24。24（2015年第2季度）：

<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

在角度JS指令中，数据绑定不适用于kendo网格

1 个答案: