Angular ui - 多次执行的选项卡控制器答案

【问题标题】：Angular ui - tabs controllers executed multiple timesAngular ui - 多次执行的选项卡控制器
【发布时间】：2015-06-03 11:53:21
【问题描述】：

当我单击一个选项卡时，相应的控制器会执行 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"
               }
            }
         } )

【问题讨论】：

原因可能是您在ng-repeat 中使用了vm.tabs()，即在每个摘要循环中被调用4 次..尝试在那里提供静态数组并看看发生了什么？
静态数组没有修复，还是调用了4次
控制器被调用的标签数量与vm.tabs() 传递的标签数量相同！奇怪的！为什么？
由于摘要周期，摘要周期被调用的次数被评估..见这个小提琴jsfiddle.net/7MhLd/850
Duuuuuudddeeee :D 我快疯了

标签： javascript angularjs tabs angular-ui-router angular-ui

【解决方案1】：

你有 ui-view 在错误的地方，它要求使用 vm.tabs() 的标签。

因为ng-repeat 有 4 个标签，所以 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>

【讨论】：

【解决方案2】：

解决方案是，注意将 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);
       });
   });

【讨论】：

我不禁注意到选项卡的内容实际上并未显示在 .tab-content 元素中

【解决方案3】：

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

注意: ng-if 不能被 ng-show/ng-hide 替代。

【讨论】：