Question

我发现了这个jsfiddle示例代码，它为单个angularjs webapge提供了多个选项卡。

我将它改编为我自己的代码。我想要某个标签来加载某个网页my-custom-page.html。

以下是我的相关代码。 HTML代码;

<div id="tabs" ng-controller="StkViewMainCtrl">
    <ul>
        <li ng-repeat="tab in tabs"
            ng-class="{active:isActiveTab(tab.url)}"
            ng-click="onClickTab(tab)">{{tab.title}}
        </li>
    </ul>
    <div id="mainView">
        <div ng-include="currentTab"></div>
    </div>
</div>
<script type="text/ng-template" id="one.tpl.html">
    <div id="viewOne">
        <h1>View One</h1>
        <p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim
            congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
    </div>
</script>

<script type="text/ng-template" id="my-custom-page.html">
    <div id="viewTwo">
        <h1>View Two</h1>
        <p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit
            amet arcu. Class aptent taciti sociosqu.</p>
    </div>
</script>

控制器代码;

.controller('StkViewMainCtrl', ['$scope', 'configuration',
        function ($scope, $configuration) {
            $scope.tabs = [{
                title: 'One',
                url: 'one.tpl.html'
            }, {
                title: 'Two',
                url: 'my-custom-page.html'
            }, {
                title: 'Three',
                url: 'three.tpl.html'
            }];

            $scope.currentTab = 'one.tpl.html';

            $scope.onClickTab = function (tab) {
                $scope.currentTab = tab.url;
            }

            $scope.isActiveTab = function(tabUrl) {
                return tabUrl == $scope.currentTab;
            }

        }]);

没有发生任何影响。 my-custom-page.html无法加载。 my-custom-page.html与正在运行的单个网页位于同一文件夹中。

Answer 1

Html是从主页面加载的，所以如果你想从文件夹中的另一个html文件加载html，你应该使用像ng-include这样的东西。所以尝试改变

<script type="text/ng-template" id="my-custom-page.html">
<div id="viewTwo">
    <h1>View Two</h1>
    <p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit
        amet arcu. Class aptent taciti sociosqu.</p>
</div>

到

 <script type="text/ng-template" id="my-custom-page.html">
<div id="viewTwo" ng-include="my-custom-page.html"></div>

我更改了代码，here是关于plunker的新代码

加载此tabbed angularjs页面的html页面

1 个答案: