通變到離子框架頁（基於AngularJS）

Question

我有一組離子框架標籤的這放映電影的列表：

<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。我的電影在CONTROLER

.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配置中，你需要一個DD一placeholderFor的電影ID，是這樣的：

.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

Answer 2

你在找什麼可能是服務/工廠，你可以存儲電影列表，然後檢索完整列表MyCtrl或只是一個電影頁面的電影對象。

angular.module('myAppName') 
.factory('MovieService', function() { 
    return { 
     MoviesList: [ 
      {movie object} 
     ], 
     GetAllMovies: function() { 
      return this.MoviesList; 
     }, 
     GetMovieById: function (id) { 
      //iterate MoviesList and return proper movie 
     } 
    } 
} 

該服務可以被再注入到你的控制器

.controller('MyCtrl', function($scope, MoviesService) {  
    $scope.movies = MoviesService.GetAllMovies(); 
} 

，並同樣適用於電影視圖控制器：

.controller('ShowMyMovie', function($scope, MoviesService) {  
    $scope.movie = MoviesService.GetMovieById(//retrieve_id_from_routing_service); 
} 

模板這種觀點，你可以簡單地使用{

然後{movie.title}}來顯示信息