KendoUI 工具栏在 angularJS 中无法正常工作

Question

我正在 angularJS 开发一个简单的测试应用程序以获取知识，我遇到了这个问题。

KendoUI 演示网页为其每个组件提供了一个代码片段。我正在尝试构建一个工具栏和一个 panelBar，但我无法使工具栏正常工作。我正在使用与网络演示相同的代码，请参见此处：

http://demos.telerik.com/kendo-ui/toolbar/angular

在我的特殊情况下，工具栏无法正确显示自身，请查看图片：

这是我写的代码：

HTML 视图：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style>
    body {
        padding-top: 50px;
        padding-bottom: 20px;
    }
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-   theme.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.default.min.css">

</head>

<body ng-app="controlApp" ng-controller="controller as control">
<!--[if lt IE 7]>
    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a      href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">

        </div>
        <div id="navbar" class="navbar-collapse collapse">

        </div>
        <!--/.navbar-collapse -->
    </div>
</nav>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
    <div class="container">
        <div class="demo-section k-header">
            <div kendo-toolbar k-options="control.toolbarOptions"></div>
        </div>        
    </div>
</div>

<div class="container">
    <!-- Example row of columns -->
    <div class="row">
        <div class="col-md-8">

        </div>
        <div class="col-md-4">
            <ul kendo-panel-bar k-options="panelBarOptions">
                <li>
                    Metallica - Master of Puppets 1986
                    <ul>
                        <li>Battery</li>
                        <li>Master of Puppets</li>
                        <li>The Thing That Should Not Be</li>
                        <li>Welcome Home (Sanitarium)</li>
                        <li>Disposable Heroes</li>
                        <li>Leper Messiah</li>
                        <li>Orion (Instrumental)</li>
                        <li>Damage, Inc.</li>
                    </ul>
                </li>
                <li>
                    Iron Maiden - Brave New World 2000
                    <ul>
                        <li>The Wicker Man</li>
                        <li>Ghost Of The Navigator</li>
                        <li>Brave New World</li>
                        <li>Blood Brothers</li>
                        <li>The Mercenary</li>
                        <li>Dream Of Mirrors</li>
                        <li>The Fallen Angel</li>
                        <li>The Nomad</li>
                        <li>Out Of The Silent Planet</li>
                        <li>The Thin Line Between Love And Hate</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

    <hr>

    <footer>
        <p>&copy; ABANTAIL S. Coop. 2014</p>
    </footer>
</div>
<!-- /container -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="controller.js"></script>


</body>

</html>

控制器：

(function () {
var controller = function () {
var scope = this;

scope.toolbarOptions = {
      items: [
          { type: "button", text: "Button" },
          { type: "button", text: "Toggle Button", togglable: true },
          {
              type: "splitButton",
              text: "Insert",
              menuButtons: [
                  { text: "Insert above", icon: "insert-n" },
                  { text: "Insert between", icon: "insert-m" },
                  { text: "Insert below", icon: "insert-s" }
              ]
          },
          { type: "separator" },
          { template: "<label>Format:</label>" },
          {
              template: "<input kendo-drop-down-list k-options='formatOptions' style='width: 150px;' />",
              overflow: "never"
          },
          { type: "separator" },
          {
              type: "buttonGroup",
              buttons: [
                  { spriteCssClass: "k-tool-icon k-justifyLeft", text: "Left", togglable: true, group: "text-align" },
                  { spriteCssClass: "k-tool-icon k-justifyCenter", text: "Center", togglable: true, group: "text-align" },
                  { spriteCssClass: "k-tool-icon k-justifyRight", text: "Right", togglable: true, group: "text-align" }
              ]
          },
          {
              type: "buttonGroup",
              buttons: [
                  { spriteCssClass: "k-tool-icon k-bold", text: "Bold", togglable: true, showText: "overflow" },
                  { spriteCssClass: "k-tool-icon k-italic", text: "Italic", togglable: true,  showText: "overflow" },
                  { spriteCssClass: "k-tool-icon k-underline", text: "Underline", togglable: true, showText: "overflow" }
              ]
          },
          {
              type: "button",
              text: "Action",
              overflow: "always"
          },
          {
              type: "button",
              text: "Another Action",
              overflow: "always"
          },
          {
              type: "button",
              text: "Something else here",
              overflow: "always"
          }
      ]
  };
  scope.formatOptions = {
      optionLabel: "Paragraph",
      dataTextField: "text",
      dataValueField: "value",
      dataSource: [
          { text: "Heading 1", value: 1 },
          { text: "Heading 2", value: 2 },
          { text: "Heading 3", value: 3 },
          { text: "Title", value: 4 },
          { text: "Subtitle", value: 5 },
      ]
  };

  scope.panelBarOptions = {

  };


}
//angular.module('controlCajaApp').controller('ControlCajaCtrl', controlCajaCtrl);
controlApp.controller('controller', controller);
}());

调制器：

var controlApp = angular.module('controlApp', ['kendo.directives']);

就是这样。关于如何使工具栏以正确的方式可视化的任何想法？提前致谢。

Answer 1

您使用的是 Kendo 2014.3.1119 发行版，但同时使用 CSS 2014.1.318 的文件，因此它们不匹配。更新到正确的版本：

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

它应该可以正常工作。

KendoUI 工具栏在 angularJS 中无法正常工作

KendoUI toolbar not working as expected in angularJS

html

javascript

kendo-ui

angularjs

演示：http://plnkr.co/edit/HRi5bA4CaDm1HLUd3Tsq?p=preview