电影细节视图Angularjs答案

【问题标题】：Movie Detail View Angularjs电影细节视图Angularjs
【发布时间】：2025-12-23 22:20:10
【问题描述】：

我是 AngularJS 的新手，我正在尝试从电影列表中进行详细视图，当您从“主页”视图中选择一部电影（单击标题）时，它应该将您重定向到新的查看所选电影的详细信息，但我不知道该怎么做。我看了很多教程，但对我有用，希望你能帮助我，谢谢！！

这是我的 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",

}]

【问题讨论】：

为什么不在movieDetail控制器中调用工厂而不在controller1中调用工厂
谢谢，我会解决这个问题，但我的问题还没有解决
您可以创建一个服务并使用该服务在控制器之间传递数据

标签： angularjs model-view-controller routing views ng-view

【解决方案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;
    });

}]);

【讨论】：

【解决方案2】：

我重构了您的代码，将电影数据存储在服务中，并在视图更改后在控制器中访问它。您可能会注意到我没有在任何地方使用$scope 变量，这是个人喜好。我觉得使用controller as语法更语义化，更容易理解。如果您有任何问题，请告诉我。

应用程序现在遵循这条路径：

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

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

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

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

工作小插曲

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

【讨论】：

谢谢你的方法确实有效，但是如果我想添加电影的标题或其他属性而不是详细视图中的所有信息怎么办？有什么方法可以访问该属性，或者这个简单的添加了 json 文件中的所有内容？在我的情况下，我需要访问该属性，因为我在 json 文件中有一个演员数组，并且在视图中应该是一个按钮，显示所选电影中的特定数组。
当然可以。这只是数据结构的问题。您可以在详细信息中包含一个链接，说明演员，它将电影参数传递给演员视图，演员控制器具有显示演员的逻辑。
你能把它加到前面的例子中吗？因为我不知道如何显示它们。在其他代码中，我看到类似：{{movie.Title}} 用于访问标题，但您的代码完全不同。