加载此选项卡 angularjs 页面的 html 页面

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 上的新代码

加载此选项卡 angularjs 页面的 html 页面

Load html page for this tabbed angularjs page

html

javascript

css

tabs

angularjs