TypeError：无法读取onsen ui，angularjs中未定义的属性'setMainPage'

Question

我正在收到TypeError: Cannot read property 'setMainPage' of undefined错误的TypeError: Cannot read property 'setMainPage' of undefined ，具有以下angularjs config和html ，我没有理解为什么会给出此错误，因为setMainPage已在onsen-ui框架中定义，请帮助我，在此先感谢

错误：

TypeError: Cannot read property 'setMainPage' of undefined
at Object.$stateProvider.state.state.onEnter (app.js:28)
at Object.invoke (onsenui_all.min.js:3)
at y.transitionTo.y.transition.M.then.y.transition.y.transition (angular-ui-router.min.js:7)
at processQueue (onsenui_all.min.js:6)
at onsenui_all.min.js:6
at Scope.parent.$get.Scope.$eval (onsenui_all.min.js:8)
at Scope.parent.$get.Scope.$digest (onsenui_all.min.js:8)
at Scope.parent.$get.Scope.$apply (onsenui_all.min.js:8)
at onsenui_all.min.js:2
at Object.invoke (onsenui_all.min.js:3)

app.js（angularjs配置）

var app = angular.module('itApp', ['onsen', 'ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {

    // By default show Tab 1 - Navigator MasterDetail example
    $urlRouterProvider.otherwise('/main');

    $stateProvider

        // Tab 1 - SlidingMenu example - SlidingMenu init
        .state('sliding', {
            abstract: true,
            // url: '/sliding', // Optional url prefix
            resolve: {
                loaded: function($rootScope) {
                    $rootScope.appTabbar.setActiveTab(1);
                    return $rootScope.appTabbar.loadPage('html/tab2.html');
                }
            }
        })

        // Tab 1 - SlidingMenu example - Landing page
        .state('sliding.main', {
            parent: 'sliding',
            url: '/main',
            onEnter: ['$rootScope', function($rootScope) {
                $rootScope.appMenu.setMainPage('map.html', {closeMenu: true});
            }]
        })          
    ;
});

HTML：

 <!DOCTYPE HTML>
<html ng-app="itApp">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">     

        <script src="onsen/js/angular/angular.min.js"></script>     
        <script src="onsen/js/onsenui.min.js"></script>
        <script src="onsen/js/angular/angular-ui-router.min.js"></script>       

        <link rel="stylesheet" href="onsen/css/onsenui.css">
        <link rel="stylesheet" href="onsen/css/onsen-css-components.css">       

        <script src="jsScripts/app.js"></script>        
        <script src="jsScripts/controllers.js"></script>                    
    </head>
    <body ng-controller="UserController">
        <ons-tabbar  var="appTabbar" animation="none">
            <ons-tab ui-sref="navigator.master">
                <ons-icon icon="ion-home"></ons-icon>
                <span style="font-size: 14px">MasterDetail</span>
            </ons-tab>
            <ons-tab ui-sref="sliding.main">
                <ons-icon icon="ion-star"></ons-icon>
                <span style="font-size: 14px">SlidingMenu</span>
            </ons-tab>
        </ons-tabbar>

        <ons-template id="html/tab1.html">
            <ons-sliding-menu menu-page="menu.jsp" side="left" var="appMenu" type="reveal" max-slide-distance="260px" swipeable="true">
            </ons-sliding-menu>
        </ons-template>

        <ons-template id="html/tab2.html">
            <ons-navigator title="Navigator" var="appNavigator">
            </ons-navigator>
        </ons-template>

    </body>
</html>

Answer 1

您可能正在尝试将appMenu元素加载到DOM中之前对其进行访问。 尝试将所有app.config()代码包装在ons.ready()函数中。 此函数在执行其内容之前，等待所有DOM元素加载。

例如：

 var app = angular.module('itApp', ['onsen', 'ui.router']); ons.ready(function(){ app.config(function($stateProvider, $urlRouterProvider) { //content }); });

TypeError：无法读取onsen ui，angularjs中未定义的属性'setMainPage'

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-10-06 16:03:58

TypeError：无法读取onsen ui，angularjs中未定义的属性&#39;setMainPage&#39;

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-10-06 16:03:58

TypeError：无法读取onsen ui，angularjs中未定义的属性'setMainPage'

解决方案1
1 已采纳 2015-10-06 16:03:58