![](/img/trans.png)
[英]Angular UI Router controllers instantiated multiple times - Direct route
[英]Angular ui - tabs controllers executed multiple times
当我单击选项卡时,相应的控制器将执行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"
}
}
} )
你有错误的地方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>
解决方案是,注意放置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);
});
});
只是为了完成已经建议的解决方案,移动ui-view外部选项卡可以创建css问题(在我的情况下确实如此),因此解决方案是在选项卡内部保持ui-view并添加ng-if ui-view div以便结果,html只包含一个ui-view div。
注意:ng-if不能被ng-show / ng-hide替换。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.