更改状态时，Angular UI Router 不执行控制器代码

Question

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

Answer 1

您面临的问题很明显。发生这种情况是因为您的控制器仅在单页应用程序中加载一次。但是，在 ionic 中有一个快速修复。您可以将要在每次调用控制器时运行的代码保存在 ionicViewBeforeEnter 中。

app.module('YourAppName').controller('MapCtrl ',function(){
    $scope.$on('$ionicView.beforeEnter', function(){ 
      //all your code you want to reinitialize goes here.
    });
});