Question

指令

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指定的值。

Answer 1

当我尝试使用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 。

谢谢，

Answer 2

请参阅此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页面复制粘贴链接内容

部分html视图的控制器无法使用KendoPanelBar contenturl在Directive TemplateUrl中工作

2 个答案: