Angularjs $scope未在视图中访问

我在应用程序中使用Angular。在获得一个特定对象（在我的例子中是一部电影）后，我将该对象分配给

$scope

（

$scope.movie=response

），以便在视图中使用它。问题是我的视图似乎没有显示我在

$scope

中使用的任何内容。我尝试过删除所有内容，并做了一个类似于

$scope=name=“whatever”

的虚拟测试，当我在视图中使用类似于

{{name}}

的东西时，不会呈现任何内容。有人面对过这个问题吗？我已经搜索过这个错误，使用

$apply（）

似乎是个好主意。我试过了，但没用。获取数据的函数如下所示：

var app = angular.module('movies');

app.factory('Films', ['$resource',function($resource){
 return $resource('/films.json', {},{
 query: { method: 'GET', isArray: true },
 create: { method: 'POST' }
 })
}]);

app.factory('Film', ['$resource', function($resource){
 return $resource('films/:id.json', {}, {
 show: {method: 'GET' },
 update: { method: 'PUT', params: {id: '@id'} },
 delete: { method: 'DELETE', params: {id: '@id'} }
 });
}]);

app.controller('MoviesController', ['$scope', '$http', '$location', '$resource', '$routeParams', 'Films', 'Film', function($scope, $http, $location, $resource, $routeParams, Films, Film){

  $scope.movies = Films.query();

  $scope.user = document.getElementById('name').innerHTML; // Find a better way to interact with devise via angular

  $scope.createMovie = function() {
    $scope.movies = Films.query();

    $http.get(
      '/categories.json'
    ).success(function(data,status,headers,config){
      $scope.categories = data;
    }).error(function(data, status, headers, config){
      alert("There was an error while fetching the categories on the database. Error " + status);
    });

    $location.path("/" + 'new').replace();
  };

  $scope.listMovies = function() {
    $location.path("/").replace();
  };

  $scope.save = function(){
    if($scope.form.$valid){
        Films.create({film: $scope.movie}, function(){
        $scope.form.$setPristine();
      }, function(error){
        alert("Movie not created");
      });
    }
  };

  $scope.deleteMovie = function(movie){
    Film.delete(movie);
    $scope.movies = Films.query();
  };

  $scope.viewDetails = function(movie){
    $scope.name="ola";
    alert(movie.id);
    $location.path("/" + movie.id);
    var Movie = $resource('films/:filmId'+'.json', {filmId: '@id'});
    $scope.movie = Movie.get({filmId: movie.id});
    $scope.movie.$promise.then(
      function(response){
        $scope.$apply();
        $scope.movie = response;

        console.log("filme e: " + response.name);
      },
      function(error){
        console.log("request failed");
      }
    );
  };

}]);

---

我查看了您的存储库，我认为您的问题在哪里。您正在尝试在所有路由中重用

MoviesController

。但是AngularJS将为每条路由创建一个新实例，因此您无法访问以前的数据，因为它将被销毁

因此，我首先为每个视图创建一个单独的控制器，这样您就可以将

viewDetails

方法的代码移动到一个新的

MovieDetailController

。要访问此控制器中的电影id，您需要使用

$routeParams

服务

angular.module('movies').controller('MovieDetailController', MovieDetailController);

function MovieDetailController($scope, $resource, $routeParams) {
  var Movie = $resource('films/:filmId'+'.json', {filmId: '@id'});
  Movie.get({filmId: $routeParams.id}).then(
    function(response) {
      $scope.movie = response;
    }, 
    function(error){
      console.log('request failed');
    }
  );
}

更改路线定义以使用新控制器

.when('/movies/:id', {
  controller: 'MovieDetailController',
  templateUrl: 'movie_details.html'
})

现在，您的

MoviesController

中的

viewDetails

方法只需重定向到电影详细信息url

$scope.viewDetails = function(movie) {
  $location.path('/movies/' + movie.id); 
} 

---

我希望它对你有用。当你尝试时请告诉我

我查看了您的存储库，我想您的问题在哪里。您正在尝试在所有路由中重用

MoviesController

。但是AngularJS将为每条路由创建一个新实例，因此您无法访问以前的数据，因为它将被销毁

因此，我首先为每个视图创建一个单独的控制器，这样您就可以将

viewDetails

方法的代码移动到一个新的

MovieDetailController

。要访问此控制器中的电影id，您需要使用

$routeParams

服务

angular.module('movies').controller('MovieDetailController', MovieDetailController);

function MovieDetailController($scope, $resource, $routeParams) {
  var Movie = $resource('films/:filmId'+'.json', {filmId: '@id'});
  Movie.get({filmId: $routeParams.id}).then(
    function(response) {
      $scope.movie = response;
    }, 
    function(error){
      console.log('request failed');
    }
  );
}

更改路线定义以使用新控制器

.when('/movies/:id', {
  controller: 'MovieDetailController',
  templateUrl: 'movie_details.html'
})

现在，您的

MoviesController

中的

viewDetails

方法只需重定向到电影详细信息url

$scope.viewDetails = function(movie) {
  $location.path('/movies/' + movie.id); 
} 

---

我希望它对你有用。当你尝试时请告诉我

您能粘贴控制器的其余部分和视图代码吗？请粘贴一些视图代码。我知道

$scope.name=“ola”

是您的伪代码，但它不会附加到

$scope

，因此在您单击

viewDetails（）

之前显示。视图在这里：是的。当我单击查看电影的详细信息时，调用MovieController中的函数viewDetails。它在routeParams中搜索具有给定id的电影，然后更新要在视图中显示的$scope。您可以粘贴控制器的其余部分和视图代码吗？请粘贴一些视图代码。我理解

$scope.name=“ola”

是您的虚拟代码，但它不会附加到

$scope

，因此在您单击

viewDetails（）

之前不会显示。视图如下：是。当我单击查看电影的详细信息时，调用MovieController中的函数viewDetails。它在routeParams中搜索具有给定id的电影，然后更新要在视图中显示的$scope。好啊如果它正在创建此控制器（MovieController）的另一个实例，则此控制器是同一控制器（MovieController）的子控制器吗？因为似乎是这样。$parent.movies，而不是parent（）.movies。抱歉，我已尝试创建另一个控制器，但无效。即使在视图中，MovieDetailController“嵌套”在MovieController中，也不应嵌套。我已将路由定义更新为

/movies/：id

，因此您可以尝试，因为可能路由器出了问题。谢谢您的提示。AngularJS检查员也帮助我理解了范围是如何工作的。它甚至显示了我没有使用的控制器中的依赖项和名称约定。：）如果我在这个细节视图中放入类似{{parent（）.movies}}的内容，我会将所有电影作为一个数组。好啊如果它正在创建此控制器（MovieController）的另一个实例，则此控制器是同一控制器（MovieController）的子控制器吗？因为似乎是这样。$parent.movies，而不是parent（）.movies。抱歉，我已尝试创建另一个控制器，但无效。即使在视图中，MovieDetailController“嵌套”在MovieController中，也不应嵌套。我已将路由定义更新为

/movies/：id

，因此您可以尝试，因为可能路由器出了问题。谢谢您的提示。AngularJS检查员也帮助我理解了范围是如何工作的。它甚至显示了我没有使用的控制器中的依赖项和名称约定。：）