javascript 将变量传递到 Ionic Framework 页面（基于 AngularJS）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22141720/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pass variable onto Ionic Framework page (based on AngularJS)
提问by Benedict Lewis
I have a set of tabs in Ionic framework which show a list of movies:
我在 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>
Each of the items in the list is linked to #/tab/movies/{{item.id}}, for example, #/tab/movies/27. My movies are defined in the controler
#/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: ''}
];
My pages are routed as below:
我的页面路由如下：
.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");
})
What I need to do now is when each item on the above list is clicked, it takes it to it's own page, #/tab/movies/{{item.id}}, where I can display things like item.titleor item.image, along with a back button to go to the list.
我现在需要做的是，当点击上面列表中的每个项目时，它会将它带到它自己的页面#/tab/movies/{{item.id}}，在那里我可以显示诸如item.title或 之类的内容item.image，以及一个返回按钮以转到列表。
In order to do this, from what I can tell, I need to create a blank ng-templatewith a placeholder for the information, and then some how pass this information to it when clicked, but I'm not sure how to do this.
为了做到这一点，据我所知，我需要为信息创建一个ng-template带有占位符的空白，然后在点击时如何将这些信息传递给它，但我不知道如何做到这一点。
回答by maurycy
What are you looking for is probably service/factory where you can store list of movies and then retrieve full list for MyCtrl or just a single movie object for movie page.
您正在寻找的可能是服务/工厂，您可以在其中存储电影列表，然后检索 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
}
}
}
that service can be then injected into your controllers
然后可以将该服务注入到您的控制器中
.controller('MyCtrl', function($scope, MoviesService) {
$scope.movies = MoviesService.GetAllMovies();
}
and same goes for a movie view controller:
电影视图控制器也是如此：
.controller('ShowMyMovie', function($scope, MoviesService) {
$scope.movie = MoviesService.GetMovieById(//retrieve_id_from_routing_service);
}
then in template for this view you can simply use {{movie.title}} to display informations
然后在此视图的模板中，您可以简单地使用 {{movie.title}} 来显示信息
回答by Omar
In your stateProvider config, you need to add a placeholderFor for the movie id, something like:
在您的 stateProvider 配置中，您需要为电影 ID 添加一个 placeholderFor，例如：
.state('tabs.movies', {
url: "/movies/:id",
views: {
'movies-tab': {
templateUrl: "movies.html",
controller: 'MyCtrl'
}
}
})
see https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service
见https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service
