AngularJS 选项卡嵌套导航答案

【问题标题】：AngularJS Tabs Nested NavigationAngularJS 选项卡嵌套导航
【发布时间】：2014-08-13 21:17:32
【问题描述】：

我正在迁移到 AngularJS，我需要动态创建具有动态内容的新选项卡，并且在此选项卡内部我需要嵌套导航。示例：单击菜单，使用 CustomerList 打开新选项卡，单击新建按钮，转到保存/编辑视图，保存后返回到 CustomerList。该行为应该在每个选项卡中都有效，而不会更改其他选项卡的内容。

我已经动态添加了标签，加载了客户列表，进入了查看页面，但是当我打开客户保存/编辑窗口时，按钮停止工作。另一个问题是，当我更改活动选项卡时，所有内容都在刷新（丢失状态）。

感谢帮助我

【问题讨论】：

你必须给我们更多的元素。你做了什么，如何（代码示例），你得到什么错误（控制台）？您需要帮助来修复错误或质疑您的方法吗？
我需要一个指南。我不确定最好的方法。

标签： angularjs tabs navigation nested

【解决方案1】：

ng-view 指令的原理是完全删除选项卡内容并在每个路由处重新创建 DOM。

但是，如果您仍想保留选项卡的状态，则应将数据存储在工厂中，这是一个单例。

【讨论】：

我猜 Ui.router 和 NGroute 不是我需要的，因为我需要同时打开 30 个选项卡，并且状态很少，我不会保存这些状态（我只是想要当我使用另一个选项卡时，不要更改这些状态）。我会尝试在没有 ui.router 和 ngroute 的情况下做到这一点。

【解决方案2】：

这种方式行得通。

<li><a ng-click="newTab('Documentation','Documentação')" href>Documentação</a></li>

HTML

 <tabset id="tabsHome" justified="true">
                <tab ng-repeat="workspace in workspaces"
                     heading="{{workspace.name}}"
                     active=workspace.active>
                    <a ng-click="removeTab(workspace)" href=''><i class="fa fa-times"></i>Fechar</a>
                    <div> 
                       <div ng-include="workspace.url"></div>
                    </div> 
                </tab> 
            </tabset>

AngularJs

app.controller('TabsCtrl', ['$scope', '$compile', function ($scope, $compile) {
$scope.newTab = function (key, label) {
    if (setAllInactive(key) == false) {$scope.workspaces.push({ id: key, name: label, active: true, url: '/' + key + '/' + key + 'List' });}
}

var setAllInactive = function (id) {
    var work = null;
    angular.forEach($scope.workspaces, function (workspace) {
        if (workspace.id == id) { work = workspace; } workspace.active = false;
    });
    if (work != null && $scope.workspaces.indexOf(work) != -1) {$scope.workspaces[$scope.workspaces.indexOf(work)].active = true; return true;}
    return false;
};

$scope.removeTab = function (workspace) {
    $scope.workspaces.splice($scope.workspaces.indexOf(workspace), 1);
}

$scope.workspaces = []; 
}]);

【讨论】：