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>

现在我想用角度来管理每个窗格的内容。喜欢这个

<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。您不仅可以使用分类视图行为，还可以根据应用程序状态更改选项卡上的控制器。看看这个here。

使用angularjs管理选项卡内容

2 个答案: