Angular ui - 选项卡控制器执行了多次

Question

当我点击一个选项卡时，相应的控制器被执行了 4 次。这是为什么？

例如DetailsPersonController的init函数执行了4次。应该只在选项卡的视图加载后执行。

Html 标签：

<tabset>
            <tab ng-repeat="tab in vm.tabs()"
                 heading="{{ tab.text | translate }}"
                 ui-sref="p.search.details.{{ tab.id }}"
                 active="tab.active">
               <div ui-view="tabContent"></div>
            </tab>
         </tabset>

州：

.state( "p.search.details", {
            url: "/details",
            abstract: true,
            templateUrl: "app/modules/partials/p/search/details/details.html",
            controller: "DetailsController",
            controllerAs: "vm"
         } )

         .state( "p.search.details.person", {
            url: "/person",
            views: {
               "tabContent": {
                  templateUrl: "app/modules/partials/p/search/details/person/person.html",
                  controller: "DetailsPersonController",
                  controllerAs: "vm"
               }
            }
         } )

         .state( "p.search.details.details", {
            url: "/details",
            views: {
               "tabContent": {
                  templateUrl: "app/modules/partials/p/search/details/details/details.html",
                  controller: "DetailsDetailsController",
                  controllerAs: "vm"
               }
            }
         } )

         .state( "p.search.details.driver", {
            url: "/driver",
            views: {
               "tabContent": {
                  templateUrl: "app/modules/partials/p/search/details/driver/driver.html",
                  controller: "DetailsDriverController",
                  controllerAs: "vm"
               }
            }
         } )

.state( "p.search.details.tests", {
            url: "/tests",
            views: {
               "tabContent": {
                  templateUrl: "app/modules/partials/p/search/details/tests/tests.html",
                  controller: "DetailsTestsController",
                  controllerAs: "vm"
               }
            }
         } )

Answer 1

解决方法是，注意放置 ui-view 的位置。它不能在 <tab>

之内

<tabset>
            <tab ng-repeat="tab in vm.tabs"
                 heading="{{ tab.text | translate }}"
                 ui-sref="p.search.details.{{ tab.id }}"
                 active="tab.active">
            </tab>
         </tabset>
         <div ui-view></div>

我用这个例子做了它并修改了它：http://plnkr.co/edit/efnfjoQ8Hft6AZITCR67?p=preview

.state('DocumentoMasterView', {
          url: "/route2",
          templateUrl: "route2.html",
          controller:'myAppController' 
      })
      .state('DocumentoMasterView.A', {
            url: '/detail',
            templateUrl: 'route2.A.view.html',
            controller:'myAppControllerA' 
      })
      .state('DocumentoMasterView.B', {
            url: '/image',
            templateUrl: 'route2.B.view.html',
            controller:'myAppControllerB' 
      })

并且：

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

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

   $scope.$on('$stateChangeSuccess', function() {
       console.log($state);
       $scope.tabs.forEach(function(tab) {
           tab.active = $scope.active(tab.route);
       });
   });

Answer 2

你有 ui-view 在错误的地方，它正在使用 vm.tabs() 请求制表符。

因为有 4 个标签，因为 ng-repeat 渲染了 div 4 次，因为它放置在 tab 元素中，这些元素将使用 ng-repeat 重复。

由于 ui-view 指令在页面上呈现 4 次，因此检查浏览器 url 并询问具有 4 tabs 的特定内容，这就是为什么所有带有模板的控制器都被称为 4在您的应用程序中使用的次数。

标记

    <tabset>
        <tab ng-repeat="tab in vm.tabs()"
             heading="{{ tab.text | translate }}"
             ui-sref="p.search.details.{{ tab.id }}"
             active="tab.active">
        </tab>
     </tabset>
     <div ui-view="tabContent"></div>

Answer 3

只是为了完成已经建议的解决方案，将 ui-view 移到选项卡外可能会产生 css 问题（在我的情况下确实如此），所以解决方案是保持 ui-view inside 选项卡并添加 ng-if ui-view div 以便在结果中，html 仅包含一个 ui-view div。

N.B。 : ng-if 不能被 ng-show/ng-hide.

代替

Angular ui - 选项卡控制器执行了多次

Angular ui - tabs controllers executed multiple times

javascript

tabs

angularjs

angular-ui

angular-ui-router