我刚开始接触 kendoUI,我需要使用 panelBar 和 toolBar 创建一个 GUI。我一定是做错了什么,因为我的代码不起作用。这是代码:
在 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-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 kendo-toolbar k-options="control.toolbarOptions"></div>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
</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>© Company 2014</p>
</footer>
</div> <!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="app.js"></script>
<script src="controller.js"></script>
</body>
</html>
JS 中的 Controller :
(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']);
提前致谢。
最佳答案
您需要在 Kendo 之前放置 Angular
脚本标签。还要确保您使用的是包含 Angular 指令绑定(bind)的 Kendo 版本。
<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.1.318/js/kendo.all.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
还有一件事:您忘记放置 ngApp
指令来实际启动应用程序。把它放在 body
例如:
<body ng-app="controlApp" ng-controller="controller as control">
演示:http://plnkr.co/edit/fqcFy07VIwOsJRTcMJ9n?p=preview
关于javascript - 剑道指令不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27686132/