Question

我有状态问题（我不明白它是如何工作的）。

好我的app.js代码查看：

....
app.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
// $ionicConfigProvider.views.transition('none');
 $stateProvider
           .state('app', {
            url: '/app',
            templateUrl: 'tpl/home.html',
            controller: 'AppController',
            abstract: true
          })
           .state('app.aquarium', {
            url: '/aquarium/index',
            views: {
              'menuContent': {
                templateUrl: 'tpl/aquarium/index.html',
                controller: 'AquariumIndexCtrl',
              }
            }
          })
....
  $urlRouterProvider.otherwise('/app/aquarium/index');

....

app.controller('AppController', function($scope) {
    console.log("App");
});
app.controller('AquariumIndexCtrl', function($scope) {
    console.log("Akwaria");
});
....

并且在index.html中我有href这个状态：

<a class="item item-icon-left" href="#/app/aquarium/index">
    <i class="icon"><img src="img/aquarium.png" /></i>
    Aq
  </a>

但是我一直看到状态为“app”（tpl / home.html）的文件。

为什么我的链接不起作用，为什么在启动应用程序时仍然加载文件tpl / home.html我使用“重定向”到

  $urlRouterProvider.otherwise('/app/aquarium/index');

？谢谢:)）

Answer 1

首先，我建议您在依赖它们时将依赖项作为字符串数组传递。如果没有，那么当你完成生产时，你会遇到问题。

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

围绕州问题：

状态直接取决于您之前建立的ui视图，在这种情况下，我认为您希望在索引中设置它们。将ui-views想象为你将用html填充的框，从州或网址调用它们，这取决于你按状态或网址构建应用程序。

使用状态：

假设您的index.html，您需要创建ui-views以填充状态中的html。

<div ui-view="menuContent">

</div>

我不知道你是否宣布了ui-view，我想是的。在抽象状态中，您应该使用视图调用ui-view，并使用以后不再需要再次调用的内容填充它，如果不是至少将其声明为空。

app.config([
  $stateProvider, 
  $urlRouterProvider, 
  $ionicConfigProvider,  
  function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

// $ionicConfigProvider.views.transition('none');
 $stateProvider
           .state('app', {
            url: '/app',
            views: {
             'menuContent': {}
            },
            abstract: true
          })
           .state('app.aquarium', {
            url: '/aquarium/index',
            views: {
              'menuContent': {
                templateUrl: 'tpl/aquarium/index.html',
                controller: 'AquariumIndexCtrl',
              }
            }
          })
....
  $urlRouterProvider.otherwise('/app/aquarium/index');

}])

将ui-view menuContent视为一个框，根据您调用的状态将以dinamically方式填充，您可以拥有任意数量的ui-views，并且只有在视图中设置它们时才逐个加载： {}州。

最后你应该使用ui-sref而不是href来调用不同的状态：

<a class="item item-icon-left" ui-sref="app.aquarium">
   <i class="icon"><img src="img/aquarium.png" /></i>
</a>

离子状态不起作用

1 个答案: