javascript - 类型错误 : Cannot read property 'controller' of undefined

Question

我第一次导航到嵌套路由时，出现此异常，“TypeError:无法读取未定义的属性‘controller’”

这会导致我的应用无法正常运行。但是，如果我四处导航，它就会开始完美运行。

下图显示了变量的值，并且抛出的代码行具有导致问题的未定义 Controller 。此代码是 Ionic 框架的一部分。

点击图片查看完整尺寸

这是我唯一定义唯一模块的 JavaScript 文件。

angular.module("sa", ["ionic"])
    .run(function($ionicPlatform) {
        $ionicPlatform.ready(function () {
            // hide the accessory bar by default (remove this to show the accessory bar above the keyboard
            // for form inputs)
            if (window.cordova && window.cordova.plugins.Keyboard) {
                window.cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if (window.StatusBar) {
                // org.apache.cordova.statusbar required
                window.StatusBar.styleDefault();
            }
        });
    })

.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state("login", {
                url: "/login",
                templateUrl: "app/manager/login.html"
            })

            .state("manager", {
                abstract: true,
                url: "/manager",
                templateUrl: "app/manager/menu.html"
            })
            .state("manager.jobs", {
                url: "/jobs",
                views: {
                    "managerContent": {
                        templateUrl: "app/manager/requested-jobs.html"
                    }
                }
            })
            .state("manager.detail", {
                url: "/detail",
                views: {
                    "managerContent": {
                        templateUrl: "app/manager/requested-job-detail.html"
                    }
                }
            });

        $urlRouterProvider.otherwise("/login");
});

这是正确加载的 login.html。它还允许单击和导航按钮。

<ion-view view-title="Login" >

  <ion-nav-bar class="bar-light"></ion-nav-bar>

  <ion-content class="has-header" >
    <ion-list>
      <ion-item href="#/manager/jobs">
        Manager
      </ion-item>
    </ion-list>
  </ion-content>

</ion-view>

这是侧边菜单文件。

<ion-side-menus enable-menu-with-back-views="false">

  <ion-side-menu-content>
    <ion-nav-bar class="bar-light">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">

        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
      </ion-nav-buttons>

      <ion-nav-view name="managerContent"></ion-nav-view>

    </ion-nav-bar>
  </ion-side-menu-content>

  <ion-side-menu side="left">

    <ion-header-bar class="bar-assertive">
      <span class="title">Cluber</span>
    </ion-header-bar>

    <ion-content>
      <ion-list>
        <ion-item class="item-icon-right" menu-close ui-sref="login">
          <i class="icon ion-ios-arrow-right icon-accessory"></i>Logout
        </ion-item>
      </ion-list>
    </ion-content>

  </ion-side-menu>

</ion-side-menus>

这是导航到时加载到菜单内容中的文件。

<ion-view view-title="Dashboard">
  <ion-content has-bouncing has-header="true">
    <ion-list>
      <ion-item class="item-border item-icon-right" ui-sref="manager.detail">
        Clean Apartment
        <i class="icon ion-ios-arrow-right icon-accessory"></i>
      </ion-item>
      <ion-item class="item-border item-icon-right" ui-sref="manager.detail">
        Repair Side Walk 
        <i class="icon ion-ios-arrow-right icon-accessory"></i>
      </ion-item>

    </ion-list>
  </ion-content>
</ion-view>

这是我拥有的最简单的示例，它始终重现 JavaScript 异常。同样，这只会在第一次导航到“manager.jobs”时发生。

Answer 1

问题出在 menu.html 文件中的以下 HTML 行。我将其嵌套在 <ion-nav-bar> 中, 相反它必须是 <ion-side-menu-content> 的直接后代.

 <ion-nav-view name="managerContent"></ion-nav-view>