angularjs 中的选项卡无法与 UI-Router 和 UI-bootstrap 一起正常工作 [英] Tabs in angularjs not working properly with UI-Router and UI-bootstrap

问题描述

我使用的是 MEAN.js 样板，您可以在此处找到完整代码.

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

以下是对 view-article.client.view.html 文件的更改，以包含 2 个新选项卡(之前的内容已复制到包含新选项卡部分的 2 个文件中):

 
<标签集><标签ng-repeat="t 在标签中"标题="{{t.heading}}"选择=去(t.route)"active="t.active"></tab></tabset><div ui-view></div>

我已将以下几行代码插入到文章控制器中:

$scope.tabs = [{标题:'SubA'，路线:'viewArticle.SubA'，活动:假}，{ 标题:'SubB'，路线:'viewArticle.SubB'，活动:假}];$scope.go = 函数(路由){$state.go(route);};$scope.active = 函数(路由){返回 $state.is(route);};$scope.$on('$stateChangeSuccess', function() {$scope.tabs.forEach(function(tab) {tab.active = $scope.active(tab.route);});});

这里是 route.js

'使用严格'angular.module('articles').config(['$stateProvider',功能($stateProvider){$stateProvider.状态('列表文章'，{网址:'/文章'，templateUrl: 'modules/articles/views/list-articles.client.view.html'}).状态('创建文章'，{url: '/文章/创建',templateUrl: 'modules/articles/views/create-article.client.view.html'}).状态('视图文章'，{url: '/articles/:articleId',templateUrl: 'modules/articles/views/view-article.client.view.html'}).状态('编辑文章'，{url: '/articles/:articleId/edit',templateUrl: 'modules/articles/views/edit-article.client.view.html'}).状态('viewArticle.SubA'，{网址:'/SubA'，templateUrl: 'modules/articles/views/view-article.client.view.SubA.html'}).状态('viewArticle.SubB'，{网址:'/SubB'，templateUrl: 'modules/articles/views/view-article.client.view.SubB.html'});}]);

解决方案

这与 angular-ui bootstrap tab 指令和 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

I'm using a MEAN.js boilerplate, you can find the entire code here.

I tried to add 2 new tabs to the page rendered after one of the articles have been selected from the list. For this task I decided to use both the UI-Router and UI-Bootstrap for Angular.js. The 2 tabs doesn't works properly, I can switch between them and correctly see their content, but occasionally when I go back and select the article list menu item, I get a blank page with the 2 tabs and nothing else.

Here is the changes to the view-article.client.view.html file to include 2 new tabs (the previous content has been copied to the 2 files containing the partial for the new tabs ):

 <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>

I've inserted to the article controller these few lines of code:

$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);
       });
   });

Here's the 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'
    });
   }
]);

解决方案

This has something to do with angular-ui bootstrap tab directive, and the select() callback. It appears that the select() callback in tab2 is being called when navigating away from tab2.

I changed:

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

to:

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

and your demo works now.

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

这篇关于angularjs 中的选项卡无法与 UI-Router 和 UI-bootstrap 一起正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！