简体   繁体   English

Angular ui - 多次执行标签控制器

[英]Angular ui - tabs controllers executed multiple times

When I click on a tab, the corresponding controller gets executed 4 times. 当我单击选项卡时,相应的控制器将执行4次。 Whys that? 为什么?

Eg DetailsPersonController 's init function is executed 4 times. 例如, DetailsPersonControllerinit函数执行4次。 Should only be exectuted once the tab's view gets loaded. 只有在选项卡视图加载后才能执行。

Html Tabs: 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>

States: 状态:

.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"
               }
            }
         } )

You have ui-view in wrong place, which was asking for tab using vm.tabs() . 你有错误的地方ui-view ,这是使用vm.tabs()请求标签。

As there are 4 tags because of ng-repeat rendered div 4 times because it has placed in tab element which are going to repeat using ng-repeat . 因为有4个标签因为ng-repeat渲染了div 4次因为它已经放置在tab元素中,所以将使用ng-repeat

As ui-view directive renders on page 4 times, that check the browser url and ask for that particular which has 4 tabs that why all the controller with template got called 4 times inside your app. ui-view指令在第4页上呈现时,检查浏览器URL并询问具有4个tabs特定内容,为什么所有带模板的控制器在应用程序内被调用了4次。

Markup 标记

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

The solution is, take care where to place your ui-view . 解决方案是,注意放置ui-view It must not be within <tab> 它不能在<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>

I made it using this example and modifying it: http://plnkr.co/edit/efnfjoQ8Hft6AZITCR67?p=preview 我使用这个例子并修改它: 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' 
      })

And: 和:

$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);
       });
   });

Just to complete the already suggested solution, moving the ui-view outside tab can create css issues (it did in my case), so the solution is to keep ui-view inside tab and add ng-if ui-view div so that in the result, the html contains only one ui-view div. 只是为了完成已经建议的解决方案,移动ui-view外部选项卡可以创建css问题(在我的情况下确实如此),因此解决方案是在选项卡内部保持ui-view并添加ng-if ui-view div以便结果,html只包含一个ui-view div。

NB : ng-if cannot be replaced by ng-show/ng-hide. 注意:ng-if不能被ng-show / ng-hide替换。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM