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

Posted

技术标签:

【中文标题】将变量传递到 Ionic Framework 页面(基于 AngularJS)【英文标题】:Pass variable onto Ionic Framework page (based on AngularJS) 【发布时间】:2014-04-04 04:53:00 【问题描述】:

我在 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('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.titleitem.image 之类的内容,以及后面按钮转到列表。

为了做到这一点,据我所知,我需要创建一个空白ng-template 并带有一个占位符作为信息,然后在单击时如何将此信息传递给它,但我不确定如何这样做。

【问题讨论】:

【参考方案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

【讨论】:

【参考方案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 来显示信息

【讨论】:

以上是关于将变量传递到 Ionic Framework 页面(基于 AngularJS)的主要内容,如果未能解决你的问题,请参考以下文章

typescript 将数据从一个页面传递到另一个页面(来源:来自'Ionic-Feed'项目)

在Ionic 2页面之间传递数据,传递的数据是未定义的

Ionic 4 - 如何使用navCtrl或Router服务在页面之间传递数据

Ionic2 将变量/数组传递给函数

Ionic Framework - 上传到 Ionic View 应用程序,没有获取最新的 javascript 文件,可能缓存仍然存在?

如何通过 Ionic 5 应用程序中的 http post 将数组传递给 Mailgun api?