javascript - 使用 angularjs 管理标签内容

Question

我有一个使用 bootstrap+jquery 的标签导航，如下所示：

<ul class="nav nav-tabs">
    <li class="active"><a href="#tag1" data-toggle="tab">Tab1</a></li>
    <li><a href="#tab2" data-toggle="tab">Tab2</a></li>
</ul>

<div ng-app="app">
    <div class="tab-content">
        <div class="tab-pane active" id="tab1"></div>
        <div class="tab-pane" id="tab2"></div>
    </div>
</div>

现在我想用 angular 来管理每个窗格的内容。像这样

<div ng-app="app">
    <div class="tab-content">
        <div class="tab-pane active" id="tab1" ng-controller="Tab1Ctrl"></div>
        <div class="tab-pane" id="tab2" ng-controller="Tab2Ctrl"></div>
    </div>
</div>

角度可以吗？每个控制器都必须加载自己的模板并用数据填充它。有什么建议么？

Answer 1

使用 ng-include：

<ng-include src="pathTemplate1" ng-controller="Tab1Ctrl"></ng-include>
<ng-include src="pathTemplate2" ng-controller="Tab2Ctrl"></ng-include>

当用户选择一个选项卡时，使用 ng-click 处理程序更新源：

$scope.pathTemplate2 = "partials/tab2.html";

Answer 2

我建议使用 angular-ui-router。您不仅可以利用分类视图行为，还可以根据应用程序状态更改选项卡上的控制器。看看这里。