查看不同的 HTML 页面？答案

【问题标题】：View different HTML pages?查看不同的 HTML 页面？
【发布时间】：2014-04-23 10:28:33
【问题描述】：

我想根据用户点击的内容查看不同的 HTML 页面。例如，我设置了三个选项卡：

<div class="span7" >
    <ul class="nav nav-tabs" style="margin-bottom: 5px;">
        <li class="active"><a href="#" ng-click="first()" data-toggle="tab">First</a></li>
        <li><a href="#" ng-click="second()" data-toggle="tab">Second</a></li>
        <li><a href="#" ng-click="third()" data-toggle="tab">Third</a></li>
    </ul>
    <div class="span12" style="margin-left:0;" ng-grid="gridOptions"></div>
</div>

我只是想根据个人点击的内容查看不同的页面。例如，如果他点击First，他将看到First 的html 页面，其中source.sourceObject 在下面的代码中表示要查看哪个html 页面。是这样写的：

<div class="span5">
    <div class="edus-activity-container">
        <div ng-show="sourceViewState.selected" class="edus-admin-activities-grid" />
    </div>
        <div ng-include="'/partials/' + source.sourceObject + '.html'"/>
</div>

在我的 javascript 文件中，source.sourceObject 是根据我是否单击 First、Second 或 Third 选项卡来定义的。但是，我的实现不起作用。我确保我在 source.sourceObject 中的文件拼写没有拼写错误。关于如何做到这一点的任何想法？

【问题讨论】：

标签： javascript html angularjs twitter-bootstrap

【解决方案1】：

在您的控制器中：

var pages = { 'one': 'partials/one.html', 'two':'partials/two.html' }
$scope.currentPage = pages['one'] ; //This is required if you want a default page 

$scope.first = function(){ $scope.currentPage = pages['one']; }
$scope.two = function(){ $scope.currentPage = pages['two']; }

在您的模板/HTML 中

<div ng-include="currentPage"/>

【讨论】：