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 ，這是使用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 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);
       });
   });

Answer 3

只是為了完成已經建議的解決方案，移動ui-view外部選項卡可以創建css問題（在我的情況下確實如此），因此解決方案是在選項卡內部保持ui-view並添加ng-if ui-view div以便結果，html只包含一個ui-view div。

注意：ng-if不能被ng-show / ng-hide替換。