使用AngularJS-Kendo指令添加Kendo Tab

时间:2013-12-05 14:56:28

标签: angularjs kendo-ui

我是AngularJS和Kendo UI的新手。我注意到Kendo有一些AngularJS指令。 https://github.com/kendo-labs/angular-kendo。我正在试图弄清楚如何使用kendo指令进行基本的选项卡控件。目前,我有以下内容:

<div id="tabstrip" kendo-tab-strip>
  <ul>
    <li class="k-state-active">Tab 1</li>
    <li>Tab 2</li>
  </ul>

  <div>
    [Page 1]
  </div>
  <div>
    [Page 2]
  </div>
</div>

但是,选项卡控件不会呈现。我已经确认我已经包含了angular-kendo.js。我有剑道网格渲染。所以我知道我已正确连接了kendo指令库。我做错了什么?

2 个答案:

答案 0 :(得分:0)

你的html是正确的,指令也是如此。你不能正确注入指令,否则你会丢失一些kendos js。看看这个plunkr

答案 1 :(得分:0)

您没有实例化角度应用。

将以下内容添加到代码段的顶部。这是让您的样品正常工作所需的最低要求:

<html>
<head>
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css">
</head>
<body ng-app='app'>
<script src="//code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="//code.angularjs.org/1.3.0/angular.min.js"></script>
<script src="//cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<script>
  angular.module('app',['kendo.directives']);
</script>