数据绑定不与角JS指令剑道电网工作 [英] Databinding is not working with kendo grid in angular JS directives

查看:197
本文介绍了数据绑定不与角JS指令剑道电网工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是新来的角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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆