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

时间:2015-02-13 18:43:03

标签: javascript angularjs angularjs-directive kendo-ui

指令

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

2 个答案:

答案 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页面复制粘贴链接内容