angularjs의 탭이 UI 라우터와 UI-Bootstrap로 제대로 작동하지 않습니다.

Question

평균 .js 보일 러 플레이트를 사용하고 있습니다. 전체 코드를 찾을 수 있습니다 여기 .

목록에서 기사 중 하나가 선택된 후 렌더링 된 페이지에 2 개의 새 탭을 추가하려고했습니다. 이 작업의 경우 angular.js에 대한 UI 라우터와 UI-Bootstrap을 모두 사용하기로 결정했습니다. 2 개의 탭이 제대로 작동하지 않으며 내용을 올바르게 볼 수는 있지만 때로는 돌아가서 돌아 가면 기사 목록 메뉴 항목을 선택하면 2 탭이 있고 다른 것이 없습니다. view-arts.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'
    });
   }
]);

.

Answer 1

이것은 Angular-UI 부트 스트랩 탭 지시문과 select () 콜백으로 수행 할 문제가 있습니다.Tab2에서 멀리 탐색 할 때 Tab2의 select () 콜백이 호출되는 것으로 나타납니다.

i :

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

.

와 데모가 지금 작동합니다.

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

Answer 2

나는 ui-bootstrap v0.11.2 에 똑같은 문제를 가졌습니다. v0.12.0 로 바뀌었고 그것은 일했습니다!