情况如此:
我正在将Angular Js用于Ionic框架来制作移动应用。 我使用标签样板启动项目。我现在有三个标签:登录 - 朋友 - 地图。
我想添加一个额外的视图,名为' 成员区',可以在登录成功后访问,但我无法做到。
在离子选项卡项目的初始设置中,每个视图都被定义为状态。
这是代码:
angular.module('starter', ['ionic','AngularGM', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform){
$ionicPlatform.ready(function(){
if(window.StatusBar){
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab',{
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.login', {
url: '/login',
views: {
'tab-login': {
templateUrl: 'templates/tab-login.html',
controller: 'LoginController'
}
}
})
.state('tab.friends', {
url: '/friends',
views: {
'tab-friends': {
templateUrl: 'templates/tab-friends.html',
controller: 'FriendsCtrl'
}
}
})
.state('tab.friend-detail', {
url: '/friend/:friendId',
views: {
'tab-friends': {
templateUrl: 'templates/friend-detail.html',
controller: 'FriendDetailCtrl'
}
}
})
.state('tab.map', {
url: '/map',
views: {
'tab-map': {
templateUrl: 'templates/tab-map.html',
controller: 'mapController'
}
}
});
$urlRouterProvider
// if none of the above states are matched, use this as the fallback
.otherwise('/tab/login');
});
这是尝试过的事情:
1。将memberArea添加为.when
$urlRouterProvider
.when('/memberArea', {
templateUrl: 'main/memberArea',
controller: 'memberAreaController'
})
// if none of the above states are matched, use this as the fallback
.otherwise('/tab/login');
});
但是在这样做时,应用程序崩溃并出现此错误:
未捕获错误:[$ injector:modulerr]由于以下原因导致无法实例化模块启动器: 错误:无效'处理程序'在when()
2。将memberArea添加为状态:
.state('memberArea', {
url: '/memberArea',
views: {
'memberArea': {
templateUrl: 'templates/memberArea.html',
controller: 'memberAreaController'
}
}
});
但是无法正常工作,访问网址#/ memberArea会显示一个空白页面(控制台中没有错误)
第3。将memberArea添加为标签:
.state('tab.memberArea', {
url: '/memberArea',
views: {
'tab-memberArea': {
templateUrl: 'templates/memberArea.html',
controller: 'memberAreaController'
}
}
});
并添加标签本身:
<!-- memberArea -->
<ion-tab title="memberArea" icon="icon ion-home" href="#/tab/memberArea">
<ion-nav-view name="tab-memberArea"></ion-nav-view>
</ion-tab>
以这种方式工作..但是是一个标签,不应该在那里查看。 如果我为标签菜单删除此HTML,则无法再从URL地址访问该视图。
这就是问题:
如何在Angular js + Ionic(带标签)中正确定义其他视图?
非常感谢!
答案 0 :(得分:1)
如果您不想将MemberArea作为标签处理,则应使用以下语法:
.state('memberArea', {
url: '/memberArea',
templateUrl: 'templates/memberArea.html'
}
);
答案 1 :(得分:0)
如果你放置一个。在状态中的项目之前,您说它应该继承父项。 例如,tab.member将表示成员继承自tab。
此外,如果您使用stateProvider,则不能再根据示例1将格式写为urlProvider。否则,它必须像您的最后一行一样。 ....等等。
我认为仍然需要一个控制器,无论它是否在选项卡上。 (如果我错了,请纠正我。)
答案 2 :(得分:0)
如果您想要将其他视图正确定义为选项卡,则应遵循选项2,将memberArea添加为状态:
.state('memberArea', {
url: '/memberArea',
templateUrl: 'templates/memberArea.html'
}
);
在元素中使用 ui-sref ='memberArea'而不是href,点击它将显示MemberArea。 只需检查该视图位置是否可供该应用使用。