我遇到了ui-router和带有params的$ state.go方法的问题。
在展开建筑物概览状态时单击建筑物单元。再次运行buildingOverview控制器，然后再次为概览面板设置动画。
关于这个的奇怪部分是我在chrome中只有这个问题。
这些面板在所有其他浏览器中按预期工作。
如果我将网址调整为/？buildingID或/？id，则面板按预期工作，但我没有获得HTML5 / SEO友好的URL。
请参阅随附的视频和代码。
我的index.route.js
(function() {
'use strict';
angular
.module('mrkb')
.config(routerConfig);
/** @ngInject */
function routerConfig($locationProvider, $stateProvider, $urlRouterProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('building', {
abstract: true,
'url': '/bldg',
views: {
'': {
templateUrl: 'app/building/index.html',
controller: 'BuildingController as building'
},
'building-overview@building': {
templateUrl: 'app/building/overview/overview.html',
controller: 'BuildingOverviewController as buildingOverview'
},
'building-map@building': {
templateUrl: 'app/building/map/map.html',
controller: 'BuildingMapController as buildingMap'
}
}
})
.state('building.landing', {
'url': '/landing',
'': {
templateUrl: 'app/building/index.html',
controller: 'BuildingController as building'
}
})
.state('building.overview', {
'url': '/:buildingID',
views: {
'building-overview@building': {
templateUrl: 'app/building/overview/overview.html',
controller: 'BuildingOverviewController as buildingOverview',
resolve: {
init: ['BuildingResultModel', '$timeout', function(BuildingResultModel, $timeout){
if(!BuildingResultModel.expanded){
$timeout(function(){
BuildingResultModel.expanded = true;
},50);
}
}]
}
}
}
})
.state('building.detail', {
'url': '/:buildingID/:id',
views: {
'building-detail@building': {
'templateUrl': 'app/building/detail/detail.html',
'controller': 'BuildingDetailController as buildingDetail',
resolve: {
init: ['BuildingResultModel', '$timeout', function(BuildingResultModel, $timeout){
if(!BuildingResultModel.expanded && !BuildingResultModel.detailExpanded){
$timeout(function(){
BuildingResultModel.expanded = true;
BuildingResultModel.detailExpanded = true;
},50);
}
}]
}
}
}
});
$urlRouterProvider.otherwise('/bldg/landing');
}
})();
详情控制器
(function(){
'use strict';
angular
.module('mrkb')
.controller('BuildingMapController', BuildingMapController);
function BuildingMapController ($log, $state, BuildingResultModel, $timeout){
var vm = this;
vm.mapModel = BuildingResultModel;
vm.mapModel.currentBldgID = $state.params.buildingID;
vm.navigateToBuildingState = function(bldgNum){
if(!BuildingResultModel.expanded){
$timeout(function(){
BuildingResultModel.expanded = true;
BuildingResultModel.shiftMap = true;
}, 50);
}
BuildingResultModel.detailExpanded = false;
// reset filter by building names and plan types array
BuildingResultModel.currentBldgNames = [''];
BuildingResultModel.FloorPlanTypeAvailability = [''];
$state.go('building.overview', { buildingID:bldgNum });
};
// Navigate to landing
vm.navigateToLanding = function(event){
event.preventDefault();
BuildingResultModel.detailExpanded = false;
$timeout(function(){
BuildingResultModel.expanded = false;
BuildingResultModel.shiftMap = false;
},50);
$state.go('building.landing');
}
}
})();
概述控制器（第一小组）
(function(){
'use strict';
angular
.module('mrkb')
.controller('BuildingOverviewController', BuildingOverviewController);
function BuildingOverviewController($log, $state, BuildingResultModel, $timeout){
var vm = this;
vm.overviewModel = BuildingResultModel;
// set BuildingResultModel for current building number to building ID passed in from state params
BuildingResultModel.currentBldgID = $state.params.buildingID;
// detail panel with building ID as param
vm.viewDetail = function(id){
$timeout(function(){
BuildingResultModel.detailExpanded = true;
},50);
$state.go('building.detail', { buildingID:BuildingResultModel.currentBldgID, id:id });
};
// Static floor plan items
vm.floorPlanItems = [
{
icon: 'icon-makoa-coaster',
name: 'Makoa',
bedroom: '3 Bedroom'
},
{
icon: 'icon-leilani-coaster',
name: 'Leilani',
bedroom: '3 Bedroom + Den'
},
{
icon: 'icon-kahua-coaster',
name: 'Kahua',
bedroom: '4 Bedroom'
}
];
// Set Active Floor Plan Filter
vm.floorPlanItemsActive = vm.floorPlanItems;
vm.setActive = function(filterItem) {
vm.floorPlanItemsActive = filterItem;
};
vm.residenceItemsActive = BuildingResultModel.allBuildings;
// Set Active Residence Unit
vm.setActiveResidence = function(id) {
vm.residenceItemsActive = id;
}
vm.AvailabiltyOptions = [
{
availability: 'available'
},
{
availability: 'sold'
},
{
availability: 'pending'
}
];
vm.filterByFloorPlan = function(name){
// Remove default class from the three floorplan filters
vm.overviewModel.filterFloorplanItemDefault = false;
BuildingResultModel.currentBldgNames = [];
BuildingResultModel.FloorPlanTypeAvailability = [''];
BuildingResultModel.currentBldgNames.push(name.toLowerCase());
};
vm.filterByAvailability = function(availability){
BuildingResultModel.FloorPlanTypeAvailability = [];
BuildingResultModel.FloorPlanTypeAvailability.push(availability);
}
vm.resetFilters = function () {
BuildingResultModel.FloorPlanTypeAvailability = [''];
}
}
})();
地图模板
<div class="mapped-item-1"
ng-class="{'active': buildingMap.mapModel.currentBldgID == 1}"
ng-click="buildingMap.navigateToBuildingState(1)">
<span class="building-text">Building</span><br />
<span class="building-number">1</span>
<div class="map-arrow"></div>
</div>
<div class="mapped-item-5"
ng-class="{'active': buildingMap.mapModel.currentBldgID == 5}"
ng-click="buildingMap.navigateToBuildingState(5)">
<span class="building-text">Building</span><br />
<span class="building-number">5</span>
<div class="map-arrow"></div>
</div>
<div class="mapped-item-2"
ng-class="{'active': buildingMap.mapModel.currentBldgID == 2}"
ng-click="buildingMap.navigateToBuildingState(2)">
<span class="building-text">Building</span><br />
<span class="building-number">2</span>
<div class="map-arrow"></div>
</div>
<div class="overlay">
</div>
<div class="map-hit-area" ng-click="buildingMap.navigateToLanding($event)"></div>
第一个面板模板（概述面板）
<header class="building-panel-header">
<h4>Select Floorplan</h4>
</header>
<!-- Floor Plan Options Filter-->
<ul class="building-panel-floorplans">
<li ng-repeat="floorPlan in buildingOverview.floorPlanItems">
<a ng-href="#"
ng-click="buildingOverview.filterByFloorPlan(floorPlan.name); buildingOverview.setActive(floorPlan)"
ng-class="{ 'active' : buildingOverview.floorPlanItemsActive === floorPlan, default: buildingOverview.overviewModel.filterFloorplanItemDefault == true }">
<i class="icon {{floorPlan.icon}}"></i>
<span>{{floorPlan.name}}</span>
<p>{{floorPlan.bedroom}}</p>
</a>
</li>
</ul>
<!-- Units -->
<h4>Select Residences</h4>
<ul class="building-panel-units">
<li ng-repeat="building in building.buildingModel.allBuildings | filterMultipleKeyValues: {buildingID: building.buildingModel.currentBldgID, name:building.buildingModel.currentBldgNames, availability:building.buildingModel.FloorPlanTypeAvailability}">
<a href="#"
class="{{building.availability}} "
ng-class="{'active': buildingOverview.residenceItemsActive === building.id }"
ng-click="buildingOverview.viewDetail(building.id, building.name); buildingOverview.setActiveResidence(building.id);">
<i class="icon icon-{{building.name}}-coaster"></i>
<span class="building-panel-unit-number">{{building.id}}</span>
</a>
</li>
</ul>
<!-- Unit Availability Filter-->
<div class="building-panel-options">
<button ng-repeat="availabiltyOption in buildingOverview.AvailabiltyOptions"
ng-click="buildingOverview.filterByAvailability(availabiltyOption.availability)"
ng-dblclick="buildingOverview.resetFilters()"
class="btn {{availabiltyOption.availability}}">{{availabiltyOption.availability}}
</button>
</div>