Question

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

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

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

在我的特定情况下，工具栏无法正确显示自己，请查看图像：

enter image description here

这是我写的代码：

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);
}());

Moduler：

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

就是这样。有关如何使toolBar以正确方式可视化的任何想法？提前谢谢。

Answer 1

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

<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中无法正常工作

1 个答案:

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