在angularjs标签不能与UI的路由器和UI，引导正常工作 [英] Tabs in angularjs not working properly with UI-Router and UI-bootstrap

问题描述

我使用的是MEAN.js样板，你可以在这里找到整个code 。

我试过2个新的选项卡添加到文章之一已经从列表中选择后呈现的页面。
对于这个任务，我决定同时使用的用户界面，路由器和UI，引导了Angular.js。
2.标签不正常工作，我可以和它们之间进行切换正确地看到他们的内容，但是偶尔，当我回去，并选择文章列表菜单项，我得到的2个选项卡，并没有别的一个空白页。

下面是更改视图article.client.view.html文件，包括2个新选项卡（在previous内容已被复制到包含部分新选项卡中的2个文件）：

 ＆LT; D​​IV NG控制器=ArticlesController＆GT;
   ＆LT;＆标签集GT;
     ＆LT;标签
            NG-重复=吨标签
            标题={{t.heading}}
            选择=去（t.route）
            活跃​​=t.active＆GT;
     ＆LT; /标签＆gt;
   ＆LT; /标签集＆GT;
  ＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;
 ＆LT; / DIV＆GT;
 

我插入文章控制器code的这几行：

  $ scope.tabs = [
       {标题：苏巴，路径：viewArticle.SubA'，活跃：假}，
       {标题：SUBB'，路线：viewArticle.SubB'，活跃：假}   ];   $ scope.go =功能（路线）{
       $ state.go（路线）;
   };   $ scope.active =功能（路线）{
       返回$ state.is（路线）;
   };   $范围。在$（'$ stateChangeSuccess'，函数（）{
       $ scope.tabs.forEach（功能（标签）{
           tab.active = $ scope.active（tab.route）;
       }）;
   }）;
 

这里的route.js

 使用严格
angular.module（'文章'）。配置（['$ stateProvider'，
   功能（$ stateProvider）{
    $ stateProvider。
    状态（'listArticles'，{
        网址：'/篇，
        templateUrl：'模块/条/视图/列表的articles.client.view.html
    }）。
    状态（'createArticle'，{
        网址：'/用品/制造'，
        templateUrl：'模块/条/视图/创建-article.client.view.html
    }）。
    状态（'viewArticle'，{
        网址：'/文章/：条款ArticleID'，
        templateUrl：'模块/条/视图/视图article.client.view.html
    }）。
    状态（'editArticle'，{
        网址：'/文章/：条款ArticleID /编辑'，
        templateUrl：'模块/条/查看/编辑 -  article.client.view.html
    }）。
    状态（'viewArticle.SubA'，{
        网址：'/苏巴，
        templateUrl：'模块/条/视图/视图article.client.view.SubA.html
    }）。    状态（'viewArticle.SubB'，{
        网址：'/ SUBB'，
        templateUrl：'模块/条/视图/视图article.client.view.SubB.html
    }）;
   }
]）;
 

解决方案

这已经是与角UI引导标签指令，并选择（）回调。看来，从TAB2导航离开时，在TAB2选择（）回调被调用。

我改了：

 `＆LT;标签NG重复=吨标签标题={{t.heading}}选择=去（t.route）活动=T 。主动＆GT; `＆LT; /标签＆gt;
 

到

 `＆LT;标签NG重复=吨标签标题={{t.heading}}UI-SREF ={{t.route}}活动=t.active＆GT; ＆LT; /标签＆gt;`
 

和您的演示作品了。

<一个href=\"http://plnkr.co/edit/efnfjoQ8Hft6AZITCR67?p=$p$pview\">http://plnkr.co/edit/efnfjoQ8Hft6AZITCR67?p=$p$pview

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的路由器和UI，引导正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！