Question

我的应用中的路由设置如下：

$stateProvider
  .state('app', {
    url: '',
    abstract: true,
    template: '<ion-nav-view></ion-nav-view>'
  });

  $stateProvider
  .state('app.todos', {
    url: '/home',
    views: {
      todos: {
        templateUrl: 'home.html',
        controller: 'TodosCtrl'
      }
    }
  });

  $stateProvider
  .state('app.help', {
    url: '/help',
    views: {
      help: {
        templateUrl: 'help.html'    
      }
    }
  });

$urlRouterProvider.otherwise('/home');

// index.html的

<body>
  <ion-nav-bar class="bar-positive"> </ion-nav-bar>

  <ion-tabs class="tabs-positive">

    <ion-tab icon="ion-checkmark" ui-sref="app.todos">
      <ion-nav-view name="todos"></ion-nav-view>
    </ion-tab>

    <ion-tab icon="ion-help" ui-sref="app.help">
      <ion-nav-view name="help"></ion-nav-view>
    </ion-tab>


  </ion-tabs>


  <script type="text/ng-template" id="home.html">
    <ion-view title="Todos">
      <ion-content padding="true">
        <h2>Home Page</h2>
        <p>Here's the main route for the app.</p>
      </ion-content>
    </ion-view>
  </script>

  <script type="text/ng-template" id="help.html">
  <ion-view title="Help">
    <ion-content padding="true">
       <h2>Using the app</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis architecto hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
    </ion-content>
  </ion-view>
</script>

</body>

在应用开始时，我希望状态app.todos变为活动状态并显示相应的模板。

这种情况没有发生。

Plnkr在这里： http://plnkr.co/edit/LDNLHx?p=preview

Answer 1

看看这个codepen http://codepen.io/aaronksaunders/pen/wKMEYP?editors=101

我将标签模板移到了HTML文件中，并将其用于处理标签，并且它似乎工作得很好。

  <script type="text/ng-template" id="tabs.html">
    <ion-tabs class="tabs-positive">
      <ion-tab icon="ion-checkmark" ui-sref="app.todos">
        <ion-nav-view name="todos"></ion-nav-view>
      </ion-tab>

      <ion-tab icon="ion-help" ui-sref="app.help">
        <ion-nav-view name="help"></ion-nav-view>
      </ion-tab>
    </ion-tabs>
  </script>

我还重构了你的抽象状态以处理新结构

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "tabs.html"
  })

Answer 2

将引号名称放在引号下。

观点：{ ＆＃39; todos＆＃39;：{ templateUrl：＆＃39; home.html＆＃39;，控制器：＆＃39; TodosCtrl＆＃39; } }

路由不适用于离子应用程序

2 个答案: