角度UI路由器在更改状态时不执行控制器代码

时间:2016-06-21 18:40:10

标签: javascript angularjs ionic-framework angular-ui-router

我正在使用侧边菜单开发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()等更改和重新加载状态...但没有它们似乎像我期望的那样工作!

1 个答案:

答案 0 :(得分:1)

您面临的问题显而易见。发生这种情况是因为您的控制器仅在单页应用程序中加载一次。然而,在离子中有一个快速解决方案。您可以在ionicViewBeforeEnter

中的控制器的每次调用中保留要运行的代码
app.module('YourAppName').controller('MapCtrl ',function(){
    $scope.$on('$ionicView.beforeEnter', function(){ 
      //all your code you want to reinitialize goes here.
    });
});