Question

我已经用ui-bootstrap＆amp;组装了一个angularjs应用程序。 ui-router，它有一些标签子视图，其中包含＆＃39; index＆＃39;有一个＆u-view＆＃39;，然后对于一些观点，带有＆ube-tabset＆＃39;的模板和另一个观点＆＃39;被加载到主要的视图中。

我的标签集没有使用转发器进行渲染，但我确实有一个标签＆＃39;控制器中的数组设置为＆＃39; active：false＆＃39;对于所有5个，例如：

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

视图加载正常，标签激活正常，因为它们具有“活动”功能。 attrib，例如：

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

但是我在标题中也有一个ui-bootstrap下拉列表，它会转换到视图并触发一个＆quot; itemSelected＆＃39;事件，例如：

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

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

＆＃39;标签＆＃39;控制器响应广播＆amp;设置活动标签：

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

这个（通过下拉列表激活标签）在我查看子视图时工作正常，但是当我第一次进入子视图时，这个过程无法设置活动，我认为因为订单已加载并准备好进行操纵。

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

在其中一个子视图控制器中（例如，子视图＃3＆＃39;用户＆＃39;），我通过＆＃39; $ controller＆＃39;添加了标签控制器。服务，例如：

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

有了这个，我似乎可以处理＆＃39; $ scope.tabs＆＃39;，但我仍然无法设置活动标签，例如：

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

我意识到我可能会设置一个基本控制器并在那里做这些事情，但后来我可能只影响一个范围内的一个tabset，我可能想要更多。

或者我需要逻辑来检查路线状态，并且只在某些状态下设置活动标签。

或者我可以设置一个活跃的桌面＆＃39; rootScope上的变量，并在选项卡模板或控制器中对其执行某些操作以使其处于活动状态。

但我宁愿以某种方式利用自动绑定，或者至少以更正确的angularjs方式监听和响应状态变化，而不添加黑客或变通办法。

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

Answer 1

我想我可以在URL中传递选项卡状态，然后以某种方式处理它。我注意到我可以从同一个控制器和视图控制选项卡，但由于我的下拉菜单位于索引标题中，并且我的标签集处于ui视图中，因此它们不能很好地发挥作用。我想有办法将数据传递到视图中，但我所遇到的问题是控制器在转换路由时会清理范围数据，所以无论我尝试什么，我都会丢失我的选项卡状态。

更多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;

现在我的下拉控制器＆＃39; itemSelected＆＃39; function设置activeTab：

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

在我的标签控制器中，我不需要使用＆＃39; $ scope。$ on＆＃39;为了对广播作出反应，我只是从工厂获取标签，组件自动呈现模型状态：

$scope.tabs = tabsFactory.getTabsArray();

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

tabsFactory.activateTab(1);

通过这种安排，无论我如何浏览应用程序，我都有工作标签行为。 THX

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

1 个答案: