angularjs 中的选项卡无法与 UI-Router 和 UI-bootstrap 一起正常工作

Posted 2023-03-03

【中文标题】angularjs 中的选项卡无法与 UI-Router 和 UI-bootstrap 一起正常工作

【英文标题】：Tabs in angularjs not working properly with UI-Router and UI-bootstrap

【发布时间】：2014-09-20 22:44:16

【问题描述】：

我使用的是 MEAN.js 样板，您可以找到整个代码 here。

在从列表中选择了一篇文章后，我尝试向呈现的页面添加 2 个新选项卡。 对于这个任务，我决定为 Angular.js 使用 UI-Router 和 UI-Bootstrap。 2 个选项卡无法正常工作，我可以在它们之间切换并正确查看它们的内容，但偶尔当我返回并选择文章列表菜单项时，我会得到一个包含 2 个选项卡的空白页面，而没有其他内容。

这里是对 view-article.client.view.html 文件的更改以包含 2 个新选项卡（之前的内容已复制到包含新选项卡部分内容的 2 个文件）：

 <div ng-controller="ArticlesController">
   <tabset>
     <tab
            ng-repeat="t in tabs"
            heading="t.heading"
            select="go(t.route)"
            active="t.active">
     </tab>
   </tabset>
  <div ui-view></div>
 </div>

我在文章控制器中插入了这几行代码：

$scope.tabs = [
        heading: 'SubA', route:'viewArticle.SubA', active:false ,
        heading: 'SubB', route:'viewArticle.SubB', active:false 

   ];

   $scope.go = function(route)
       $state.go(route);
   ;

   $scope.active = function(route)
       return $state.is(route);
   ;

   $scope.$on('$stateChangeSuccess', function() 
       $scope.tabs.forEach(function(tab) 
           tab.active = $scope.active(tab.route);
       );
   );

这是 route.js

'use strict'
angular.module('articles').config(['$stateProvider',
   function($stateProvider) 
    $stateProvider.
    state('listArticles', 
        url: '/articles',
        templateUrl: 'modules/articles/views/list-articles.client.view.html'
    ).
    state('createArticle', 
        url: '/articles/create',
        templateUrl: 'modules/articles/views/create-article.client.view.html'
    ).
    state('viewArticle', 
        url: '/articles/:articleId',
        templateUrl: 'modules/articles/views/view-article.client.view.html'
    ).
    state('editArticle', 
        url: '/articles/:articleId/edit',
        templateUrl: 'modules/articles/views/edit-article.client.view.html'
    ).
    state('viewArticle.SubA', 
        url: '/SubA',
        templateUrl: 'modules/articles/views/view-article.client.view.SubA.html'
    ).

    state('viewArticle.SubB', 
        url: '/SubB',
        templateUrl: 'modules/articles/views/view-article.client.view.SubB.html'
    );
   
]);

【问题讨论】：

你能把这段代码放进去吗？

@ChrisT 我在 github 上创建了一个 mean.js 版本，并添加了 link

你能创建一个最小的测试用例并把它放进去吗？

@ChrisT here 是笨蛋

【参考方案1】：

这与 angular-ui 引导选项卡指令和 select() 回调有关。离开 tab2 时，似乎正在调用 tab2 中的 select() 回调。

我变了：

`<tab  ng-repeat="t in tabs"  heading="t.heading" select="go(t.route)" active="t.active"> `</tab>

到：

`<tab  ng-repeat="t in tabs"  heading="t.heading"  ui-sref="t.route" active="t.active"> </tab>`

您的演示现在可以运行了。

http://plnkr.co/edit/efnfjoQ8Hft6AZITCR67?p=preview

【讨论】：

我在使用 v.0.11.2 时遇到了同样的问题，但在 0.12 中它可以正常使用 select。

running angular 1.3.2 and angular-ui-router 0.2.13 and angular-bootstrap with tabs 上面的提示确实消除了一个错误的行为，谢谢 Chris 但是当我有它时它也会破坏一个工作行为具有 2 个子状态的抽象状态。最初，当网站加载时，第一个选项卡永远不会被激活，但旧的选择功能会发生这种情况！

我更正了：“最初加载网站时，第一个选项卡永远不会被激活/选择，因此不会更改状态，因此不会激活子状态，但旧的选择功能不会发生这种情况！”

克里斯，如果你读到这篇文章，请看看我现在做了一个复制：***.com/questions/28387547/…

【参考方案2】：

我在 ui-boostrap v0.11.2 上遇到了同样的问题，我改为 v0.12.0 并且成功了！