我正在使用侧边菜单开发Ionic应用程序。但是,国家的变化并没有按照我的意愿发挥作用。
这是我在$stateProvider
文件app.js
中定义的父子关系:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.home', {
url: "/home",
views: {
'menuContent':{
templateUrl: "templates/home.html",
controller: 'AppCtrl'
}
}
})
.state('app.map', {
url: "/map",
views: {
'menuContent':{
templateUrl: "templates/map.html",
controller: 'MapCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/home');
});
以下是要遵循的步骤:
当我点击home.html
模板中定义的区域元素时:
<area id="ImgMap" shape="poly" coords="456,326,521,69,274,10,259,91,290,216,388,326"
ng-click="loadMap(0)" ui-sref="app.mapa" ui-sref-opts="{ reload: true }" title="Map" alt="Map"/>
//I've also tried with href='#/app/map'
应用转到app.map
状态,加载map.html
模板并正确执行MapCtrl
控制器代码。
然后,如果我通过侧边菜单返回home.html
页面(代码如下):
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left" >
<ion-content class="mymenu">
<div id="menu-list">
<ion-list class="list">
<ion-item item-type="item-icon-left" nav-clear menu-close href="#/app/home">
<i class="icon ion-home"></i><span>Home</span>
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
然后我再次点击home.html
页面中定义的区域元素,就像第一个一样。只有这次它正确导航到map
页面,但控制器MapCtrl
没有执行其代码,因此我无法在需要时重新加载地图信息。
所以,简历。从home
状态开始,我转到map
状态,一切都正常执行。但是,如果我回到home
状态并重复此过程,map
状态的控制器此次不会执行其代码。
我做错了什么?
我尝试过不同的解决方案,尝试使用template
选项代替templateUrl
,强制使用$state.go()
等更改和重新加载状态...但没有它们似乎像我期望的那样工作!
答案 0 :(得分:1)
您面临的问题显而易见。发生这种情况是因为您的控制器仅在单页应用程序中加载一次。然而,在离子中有一个快速解决方案。您可以在ionicViewBeforeEnter
。
app.module('YourAppName').controller('MapCtrl ',function(){
$scope.$on('$ionicView.beforeEnter', function(){
//all your code you want to reinitialize goes here.
});
});