Question

单击选项卡时，相应的控制器将执行4次。是谁？

E.g。 DetailsPersonController的{{1}}函数执行了4次。只有在选项卡视图加载后才能执行。

Html标签：

init

国：

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

Answer 1

您的ui-view位置错误，需要使用vm.tabs()标签。

由于ng-repeat渲染div有4个标记，因为它已放置在tab元素中，因此会使用ng-repeat重复这些标记。

当ui-view指令在第4页上呈现时，会检查浏览器网址并询问具有4 tabs的特定内容，以便为什么所有带模板的控制器都会在您的应用内被调用4次。< / p>

<强>标记

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

<强> N.B。：ng-if不能被ng-show / ng-hide替换。

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

3 个答案: