部分html视图's控制器未使用KendoPanelBar内容URL在指令模板URL中工作

Partial html view's controller not working in Directive TemplateUrl using KendoPanelBar contenturl

本文关键字：URL 内容 指令 工作 KendoPanelBar 未使用 视图 html 控制器 部分      更新时间：2023-11-02

指令

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分配的值。

只有当我尝试在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。

谢谢，

请参阅此剑道官方页面示例

    <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页面链接内容的复制粘贴，以防链接更改

相关文章：