javascript - Angular Js + ionic : How to add additional view?

Question

情况是这样的:

我在 Ionic 框架中使用 Angular Js 来制作移动应用程序。我使用选项卡样板启动项目。我现在有三个选项卡:登录 - 好友 - map 。

我想添加一个额外的 View ，名为“成员(member)区”，登录成功后即可访问，但我做不到。

在 ionic tabs 项目的初始设置中，每个 View 都定义为状态。

这是代码:

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');

});

但在执行此操作时，应用会因以下错误而崩溃:

Uncaught Error :[$injector:modulerr] 由于以下原因无法实例化模块启动器:错误:when() 中的“处理程序”无效

<强>2。将 memberArea 添加为状态:

    .state('memberArea', {
    url: '/memberArea',
    views: {
      'memberArea': {
        templateUrl: 'templates/memberArea.html',
        controller: 'memberAreaController'
      }
    }
  });

但是不工作，访问 url #/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>

以这种方式工作..但它是一个选项卡，不应该出现在 View 中。如果我删除选项卡菜单的此 HTML，则无法再从 URL 地址访问该 View 。

问题是:

我如何在 Angular js + Ionic(带选项卡)中正确定义附加 View ？

非常感谢!

Answer 1

如果您不想将 MemberArea 作为选项卡处理，您应该使用以下语法:

.state('memberArea', {
    url: '/memberArea',
    templateUrl: 'templates/memberArea.html'
    }
);