使用 AngularJS-Kendo 指令添加 Kendo 选项卡答案

【问题标题】：Add Kendo Tab in with AngularJS-Kendo Directives使用 AngularJS-Kendo 指令添加 Kendo 选项卡
【发布时间】：2013-12-05 14:56:28
【问题描述】：

我是 AngularJS 和 Kendo UI 的新手。我注意到 Kendo 有一些 AngularJS 指令。 https://github.com/kendo-labs/angular-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。我有剑道网格渲染。所以我知道我已经正确连接了剑道指令库。我做错了什么？

【问题讨论】：

标签： angularjs kendo-ui

【解决方案1】：

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

【讨论】：

【解决方案2】：

您没有实例化 Angular 应用程序。

将以下内容添加到代码 sn-p 的顶部。这是让您的示例正常工作所需的最低要求：

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

【讨论】：