Question

我是AngularJS的新手，我正试图从电影列表中做一个详细信息视图，当你从“主页”视图中选择一部电影（点击标题）时，它应该将你重定向到新的查看所选电影的详细信息，但我无法弄清楚如何做到这一点。我看了很多教程但是对我来说都有用，希望你能帮助我，谢谢!!

这是代码的一部分：http://jsfiddle.net/3fu0gr81/

这是我的json文件的一个例子：

[{ "Title": "Birdman",

    "Plot": "A washed-up actor, who once played an iconic superhero, battles his ego and attempts to recover his family, his career and himself in the days leading up to the opening of his Broadway play.",

    "Year": "2014",

    "Director": "Alejandro González Iñárritu",

    "Genre": "Comedy",

    "Duration": "119 min",

}]

Answer 1

myApp.controller('MovieDetail', ['$scope', '$routeParams','$http',function($scope,$routeParams,$http){
    $http({
              method: 'GET',
              url: 'movie.json'

    }).success(function(data){
        $scope.movies = data;
    });

}]);

此处包含所有电影数据的$ scope.movies

使用ng-repeat你可以在视图中打印

<div ng-repeat="movie in movies">
   <li>{{movie.name}}</li>
</div>

如果你想要特定的电影，你必须用$ routeParams.movieId过滤

$ scope.filterId = $ routeParams.movieId;

并且你也可以通过服务获得单一记录

myApp.controller('MovieDetail', ['$scope', '$routeParams','$http',function($scope,$routeParams,$http){
    $http({
              method: 'GET',
              url: 'movie.json',
            params:{"id":"$routeParams.MovieId"}
    }).success(function(data){
        $scope.movies = data;
    });

}]);

Answer 2

我重构了您的代码，将代码存储在服务中，并在视图更改后在控制器中访问它。您可能会注意到我未在任何地方使用$scope变量以及该个人偏好。我觉得使用controller as语法更具语义性，更容易理解。如果您有任何疑问，请告诉我。

该应用程序现在遵循此路径：

1）调用movie service的list方法，使用$http服务加载电影数据

2）将数据存储在Movie service上的方法可访问的私有对象中，并将其传递回控制器

3）在视图中为包含电影标题的每个电影标题创建一个链接作为路线参数

4）在详细信息视图中，使用$routeParam服务获取点击的电影的标题，并在getDetails上调用新的Movie service方法以返回该电影的详细信息

工作插件

http://plnkr.co/edit/zSyatT8JAHoBUQ3D2Zs6?p=preview

电影细节查看Angularjs

2 个答案: