剑道指令不起作用
Kendo directives not working
我从kendoUI的世界开始，我需要使用面板栏和工具栏创建一个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中的控制器：
(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 指令绑定的剑道版本。
<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
我也有这种类型的错误，我通过放置这些 js 和 CSS 来解决
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="//cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="//cdn.kendostatic.com/2014.2.716/styles/kendo.flat.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script src="//cdn.kendostatic.com/2014.2.716/js/kendo.angular.min.js"></script>
我也有这个错误，但这绝对是事情的顺序。
<script src="/app/node_modules/jquery/jquery.min.js"></script>
<script src="/app/node_modules/angular/angular.min.js"></script>
<script src="/app/node_modules/kendoui/kendo.all.min.js"></script>
相关文章：
- Angular指令在alertify setContent内容中不起作用
- AngularJS指令部分应用的函数don'不起作用
- Google Maps API OverlayView(）在AngularJS指令中不起作用
- mouseover和mouseleave文本颜色更改在指令链接中不起作用
- 这段jquery代码在angular指令中不起作用
- Angular Filter在指令表达式中不起作用
- Angular UI Select2指令搜索功能不起作用
- 新的自定义角度指令不起作用
- 对于使用传递的数据计算的局部范围变量，角度绑定在自定义指令中不起作用
- 滚动指令在Angular JS中不起作用
- 角度指令双向绑定不起作用
- Angular.JS自定义指令;不起作用
- 指令中选择输入的双向绑定不起作用
- ng中使用的指令包括dond'不起作用
- scope.$apply 是未定义的，在 scrolly 指令中不起作用
- AngularJS，自定义指令不起作用@ plnkr
- 指令的角度优先级不起作用
- Angular js指令使用控制器作为语法ng点击不起作用
- 指令链接中的绑定不起作用
- ng 路由不起作用指令
