指令
app.directive('PanelbarDirective', function ($http) {
return {
restrict: "EA",
templateUrl: 'ngview/shared/panelbar.html'
};
});
testcontroller.js
'use strict';
app.controller('testcontroller', ['$scope',
function testcontroller($scope) {
$scope.LabelValue = 'From Controller';
}]);
panelbar.html
<div id="selected-values" class="col-sm-12 colSlctdValues" >
<ul id="panelbar"></ul>
<script>
$("#panelbar").kendoPanelBar({
dataSource: [
{
text: "Teachers",
expanded: true,
contentUrl: "ngview/shared/Teachers.html"
}
]
});
</script>
</div>
Teachers.html
<table ng-controller="testcontroller">
<body>
<tr>
<td>{{LabelValue}}</td>
</tr>
</body>
</table>
我面临的问题是,它始终显示值{{LabelValue}},而不是我在部分视图控制器中为LabelValue指定的值。
答案 0 :(得分:0)
当我尝试使用javascript实现此功能时,它只有问题 的 panelbar.html
<script>
$("#panelbar").kendoPanelBar({
dataSource: [
{
text: "Teachers",
expanded: true,
contentUrl: "ngview/shared/Teachers.html"
}
]
});
</script>
然而我修复使用
<ul id="panelbar" kendo-panel-bar k-options="panelBarOptions">
<li>
Teachers
<ul>
<li ng-include="'ngview/shared/Teachers.html'"></li>
</ul>
</li>
</ul>
很想知道是否还有人可以帮助我使用脚本代替 ul 和 ng-include 。
谢谢,
答案 1 :(得分:-1)
请参阅此kendo official page examples
<div id="example">
<div class="wrapper">
<ul id="panelbar">
<li>
BODY
<div></div>
</li>
<li>
ENGINE
<div></div>
</li>
<li>
TRANSMISSION
<div></div>
</li>
<li>
PERFORMANCE
<div></div>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function() {
$("#panelbar").kendoPanelBar({
expandMode: "single",
contentUrls: [
'../content/web/panelbar/ajax/ajaxContent1.html',
'../content/web/panelbar/ajax/ajaxContent2.html',
'../content/web/panelbar/ajax/ajaxContent3.html',
'../content/web/panelbar/ajax/ajaxContent4.html'
]
});
});
</script>
<style>
.wrapper {
height: 320px;
margin: 20px auto;
padding: 20px 0 0;
background: url('../content/web/panelbar/astonmartin.png') no-repeat center 50px transparent;
}
#panelbar {
width: 250px;
float: right;
margin-bottom: 20px;
}
#panelbar p {
padding: 1em;
}
</style>
这部分代码是在链接更改
的情况下从KendoUI页面复制粘贴链接内容