Angular Js + Ionic:如何添加额外的视图?

时间:2014-05-14 09:57:23

标签: javascript android ios angularjs ionic-framework

情况如此:

我正在将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(带标签)中正确定义其他视图?

非常感谢!

3 个答案:

答案 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。 只需检查该视图位置是否可供该应用使用。