javascript - 将变量传递到 Ionic Framework 页面(基于 AngularJS)

Question

我在 Ionic 框架中有一组选项卡，显示电影列表:

<script id="tabs.html" type="text/ng-template">
  <ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive">
    <ion-tab title="Movies" icon="ion-film-marker" href="#/tab/movies">
      <ion-nav-view name="movies-tab"></ion-nav-view>
    </ion-tab>
  </ion-tabs>
</script>

<script id="movies.html" type="text/ng-template">
  <ion-view title="'Movies'">
    <ion-content has-header="true" padding="false">
      <div class="list">
        <a ng-repeat="item in movies" href="#/tab/movies/{{item.id}}" class="item item-thumbnail-left item-text-wrap">
          <img ng-src="{{ item.image }}">
          <h2>{{ item.title }}</h2>
          <h4>{{ item.desc }}</h4>
        </a>
      </div>
    </ion-content>
  </ion-view>
</script>

列表中的每个项目都链接到 #/tab/movies/{{item.id}}，例如 #/tab/movies/27。我的电影是在 Controller 中定义的

.controller('MyCtrl', function($scope) {    
  $scope.movies = [
    { id: 1, title: '12 Rounds', desc: 'Detective Danny Fisher discovers his girlfriend has been kidnapped by a ex-con tied to Fisher\'s past, and he\'ll have to successfully complete 12 challenges in order to secure her safe release.', image: ''}
  ];

我的页面路由如下:

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "tabs.html"
    })
    .state('tabs.movies', {
      url: "/movies",
      views: {
        'movies-tab': {
          templateUrl: "movies.html",
          controller: 'MyCtrl'
        }
      }
    })

   $urlRouterProvider.otherwise("/tab/movies");

})

我现在需要做的是，当单击上述列表中的每个项目时，它会将其带到自己的页面，#/tab/movies/{{item.id}}，其中我可以显示 item.title 或 item.image 等内容，以及用于转到列表的后退按钮。

为了做到这一点，据我所知，我需要创建一个空白的 ng-template ，其中包含信息的占位符，然后在单击时如何将此信息传递给它，但我不知道该怎么做。

Answer 1

在你的 stateProvider 配置中，你需要为电影 id 添加一个 placeholderFor，例如:

.state('tabs.movies', {
  url: "/movies/:id",
  views: {
    'movies-tab': {
      templateUrl: "movies.html",
      controller: 'MyCtrl'
    }
  }
})

参见https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service