Question

我正在迁移到AngularJS，我需要动态创建新标签，使用动态内容，在此标签页面内我需要嵌套导航。示例：单击菜单，使用CustomerList打开新选项卡，单击新建按钮，转到保存/编辑视图，保存后返回到CustomerList。这种行为应该适用于每个标签，而不会改变其他标签的内容。

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

请帮助我

Answer 1

ng-view指令的原则是完全删除标签内容并在每个路由时重新创建DOM。

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

Answer 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 = []; 
}]);

AngularJS选项卡嵌套导航

2 个答案: