Question

我遇到了从离子主视图导航到局部视图的问题。我正在根据离子中定义的规则做一切，但我似乎无法解决这个问题。

我的代码如下;

index.html：

<!DOCTYPE html>
 <html lang="en" class="no-js">
<head>
    <meta charset="UTF-8" />
     <script src="lib/ionic/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
    <ion-nav-view></ion-nav-view>

    <script type="text/javascript" src="app/app.js"></script>
    <script type="text/javascript" src="app/AppCtrl.js"></script>
    <script type="text/javascript" src="app/PartialCtrl.js"></script>

</body>

我的menu.html文件：

<ion-view>
<ion-content>
<ion-list fill-mnu-item>
      <ion-item  nav-clear  href="#app/partialview">HOME</ion-item>  
</ion-list>  
</ion-content>
</ion-view>

我的app.js文件：

angular.module('app.controllers',['ionic']);
angular.module('app', ['ionic', 'app.controllers'])

.run(['$ionicPlatform',function($ionicPlatform) {

 $ionicPlatform.ready(function() {
 // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
  // org.apache.cordova.statusbar required
  StatusBar.styleDefault();
}
});

}])
.config(['$stateProvider',   '$urlRouterProvider',function($stateProvider,$urlRouterProvider) {

$stateProvider.state('app', {
url: "/app",
templateUrl: "app/menu.html",
controller: 'AppCtrl as vm'
 });

 $stateProvider.state('app.partialview', {
    url: "/partialview",
    views: {
        'menuContent': {
        templateUrl: "app/partials/partialview.html",
        controller: 'PartialCtrl as vm'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app');
    }]);

我的AppCtrl控制器文件：

 //App Controller 
(function(){
  'use strict';

  angular.module('app').controller('AppCtrl',AppCtrl);

  AppCtrl.$Inject = ['$scope','$ionicModal','$timeout','$state'];

  function AppCtrl($scope, $ionicModal, $timeout,$state){

   console.log ("App Controller Initialed ---> ");


   }

   })();

我的PartialCtrl.js控制器文件：

(function (){

 'use strict';
  angular
  .module('app')
  .controller('PartialCtrl',PartialCtrl);

  PartialCtrl.$inject = ['$scope'];


  function PartialCtrl($scope){
     var vm = this;
     console.log("PartialCtrl Initiated -->");


  }

})();

当我点击menu.html文件上的链接时，我想做的只是转到partialview.html。

有人可以让我知道我做错了吗？。

我的文件结构如下所示：

enter image description here 你可以找到完整的源代码here。有人可以帮帮我吗？

Answer 1

在app.js中，您这样说：

$stateProvider.state('app.partialview', {
      url: "/partialview",
      views: {
            'menuContent': {
            templateUrl: "app/partials/partialview.html",
            controller: 'PartialCtrl as vm'
          }
        }
      });

views属性表示您的视图中有嵌套视图。所以你必须有2 ion-nav-view。一个用于所有内容，一个用于部分视图。

因此解决方案是：只需在ion-nav-view中添加menu.html就可以了！像这样：

<ion-nav-view name="menuContent"></ion-nav-view>

名称必须与放入app.js文件的名称相同。如果您想了解有关视图和路由的更多信息，请查看ui-router doc。如果您想了解具有嵌套视图的离子应用程序的示例，您可以查看ionic starter tabs template

IONIC部分视图不显示

1 个答案: