我收到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>
最佳答案
您可能正在尝试将appMenu元素加载到DOM中之前。尝试将所有app.config()代码包装在ons.ready()函数中。此函数在执行其内容之前，等待所有DOM元素加载。
例如：
var app = angular.module('itApp', ['onsen', 'ui.router']);
ons.ready(function(){
app.config(function($stateProvider, $urlRouterProvider) {
//content
});
});