Question

我在应用程序中使用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");
      }
    );
  };

}]);

Answer 1

我查看了您的存储库，我认为您的问题出在哪里。您正尝试在所有路线中重复使用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'
})

现在viewDetails中的MoviesController方法只需要重定向到电影详情网址。

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

我希望它适合你。当你尝试时让我知道！

$ scope未在视图中被访问

1 个答案: