通过下拉菜单更改路由状态时，如何在子视图中将选项卡设置为活动状态？

Question

我用 ui-bootstrap 和 ui-router 组装了一个 angularjs 应用程序，其中有一些选项卡 sub-views，其中 'index' 有一个 'ui-view' ，然后对于一些观点，带有 'uib-tabset' 和另一个 'ui-view' 的模板被加载到主 'ui-view' 中。

我的 tabset 没有用中继器渲染，但我在控制器中确实有一个 'tabs' 数组设置，其中所有 5 个数组设置为 'active: false'，例如：

$scope.tabs = [{ active: false }, { active: false }, { active: false }, { active: false }, { active: false }];

视图加载正常，选项卡激活正常，因为它们具有 'active' 属性，例如：

<uib-tab heading="Users" ng-click="go('/settings/users')" active="tabs[3].active"></uib-tab>

但我在 header 中还有一个 ui-bootstrap 下拉菜单，它会转换到视图并触发 'itemSelected' 事件，例如：

<li><a href="#/settings/users" ng-click="itemSelected(3)">Users</a></li>

$scope.itemSelected = function(item) {
    $rootScope.$broadcast("itemSelected", { tabIdx: item });

'tabs' 控制器响应广播并设置活动标签：

$scope.$on('itemSelected', function (event, args) {
    $scope.tabs[args.tabIdx].active = true;

当我在子视图中时，这个（通过下拉菜单激活选项卡）工作正常，但是当我第一次进入子视图时，这个过程无法设置活动，我认为是因为加载顺序并为操纵做好准备。

我没有基本控制器，但已经为每个视图定义了控制器，因为我需要为它们添加更多行为。

在其中一个子视图控制器中（例如，子视图 #3 'Users'），我通过“$controller”服务添加了选项卡控制器，例如：

$controller('TabsCtrl', { $scope: $scope })

有了这个，我似乎得到了“$scope.tabs”的句柄，但我仍然无法设置活动选项卡，例如：

$scope.tabs[3].active = true;

我意识到我可能会设置一个基本控制器并在其中执行这些操作，但是我可能只会影响范围内的一个选项卡集，稍后我可能需要更多。

或者我需要逻辑来检查路由状态，并且只在某些状态下设置活动选项卡。

或者我可以在 rootScope 上设置一个 'activeTab' 变量，然后在选项卡模板或控制器中对其进行一些操作以使其处于活动状态。

但我宁愿以某种方式利用自动绑定，或者至少以更正确的方式 angularjs 监听和响应状态变化，而无需添加 hack 或解决方法。

通过下拉菜单更改路由状态时，如何在子视图中将选项卡设置为活动状态？

Answer 1

我想我可以在 URL 中传递选项卡状态，然后以某种方式处理它。我注意到我可以从同一个控制器和视图控制选项卡，但由于我的下拉列表位于索引 header 中，而我的选项卡集位于 ui-view 中，因此它们无法正常播放。我想有一些方法可以将数据传递到视图中，但我遇到的问题是控制器在转换路由时清理范围数据，所以无论我尝试什么，我都会丢失我的选项卡状态。

一种更 angularjs 的方法是将工厂添加到基础应用程序模块，例如：

.factory('tabsFactory', function() {
    var tabsService = {};
    var _tabsArray = [{ active: false }, { active: false }, { active: false }, { active: false }, { active: false }];
    tabsService.activateTab = function(idx) {
        for(var i = 0; i < _tabsArray.length; ++i) {
            if (idx != i) {
                _tabsArray[i].active = false;
            } else {
            _tabsArray[i].active = true;
            }
        };
    };
    tabsService.getTabsArray = function() {
        return _tabsArray;
    }
    return tabsService;

现在我的下拉控制器 'itemSelected' 函数设置了 activeTab:

$scope.itemSelected = function(idx) {
    tabsFactory.activateTab(idx);

在我的选项卡控制器中，我不需要使用“$scope.$on”来对广播做出反应，我只是从工厂获取选项卡，组件会自动呈现模型状态：

$scope.tabs = tabsFactory.getTabsArray();

此外，由于每个 view/sub-view 都有一个控制器，我可以通过在每个 sub-view 控制器中激活相应的选项卡来适应浏览器刷新：

tabsFactory.activateTab(1);

通过这种安排，无论我如何在应用程序中导航，我都可以使用选项卡行为。谢谢

通过下拉菜单更改路由状态时，如何在子视图中将选项卡设置为活动状态？

When changing route state via a dropdown, how can I set a tab as active in a sub view?

angularjs

angular-ui-bootstrap

angular-ui-router