javascript - Angular UI 路由器在更改状态时不执行 Controller 代码

Question

我正在开发一个 Ionic 应用程序，使用侧面菜单。但状态的改变并没有按照我想要的那样进行。

这是我在 app.js 文件中的 $stateProvider 中定义的父子关系:

  .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 Controller 代码。

然后，如果我通过侧边菜单返回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 页面，但 Controller MapCtrl 不执行其代码，因此我无法在需要时重新加载 map 信息。

所以，在简历中。从我的 home 状态转到 map 状态，一切都正确执行。但是，如果我返回 home 状态并重复该过程，map 状态的 Controller 这次不会执行其代码。

我做错了什么？

我尝试了不同的解决方案，尝试使用 template 选项而不是 templateUrl，使用 $state.go() 强制更改并重新加载状态 等等...但它们似乎都没有按照我的预期工作!

Answer 1

您面临的问题是显而易见的。发生这种情况是因为您的 Controller 在单页应用程序中仅加载一次。然而，在 ionic 中有一个快速修复方法。您可以将要在 Controller 的每次调用中运行的代码保留在 ionicViewBeforeEnter 内。

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