[英]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. 例如, DetailsPersonController
的init
函数执行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.