AngularJS factory

Question

Im kinda new в angularjs, и я пытаюсь создать небольшую базу данных фильмов. Это первый раз, когда я использовал завод, и я хотел убедиться, что это правильный способ сделать это и как использовать этот завод в другой функции, как показано ниже?

Я хочу, чтобы эта фабрика запускалась только один раз, поэтому я мог использовать ее в любом контроллере, который мне нравится. Однако я потерялся, поэтому не могу использовать $ scope.allMovies в приведенном ниже примере. Заранее спасибо!

var app = angular.module('myApp', []); 

app.factory('moviesService', ['$http', function($http) { 

    var allMovies = []; 

    var getMovies = function() { 
     $http.get('js/data.json').success(function(data) { 
      angular.forEach(data, function(movies) { 
      allMovies.push(movies);   
     }); 
    }) 
} 

getMovies(); 

var getAllMovies = function(){ 
     return allMovies; 
} 

return { 
    getAllMovies: getAllMovies 
}; 

}]); 

app.controller('listController', ['$scope', 'moviesService', function($scope,moviesService) { 

$scope.genres = ['All', 'Crime', 'Drama', 'Action', 'Comedy']; 

$scope.allMovies = moviesService.getAllMovies(); 

$scope.moviesByGenre = []; 

$scope.selectedGenre = 'All'; 

$scope.getMoviesByGenre = function() { 
    // code to get movies by genre goes here 
    // cant access $scope.allMovies from here, returns as an empty array 
}; 
}]); 

Мой index.html выглядит следующим образом:

<div ng-controller="listController"> 
    <div ng-repeat="movies in allMovies">{{movies.title}}</div> 
</div> 

Это работает, у меня есть список из movies.title я получаю от data.json.

Однако, когда я пытаюсь console.log $ scope.allMovies изнутри функции getMoviesByGenre, я получаю массив emtpy.

Answer 1

Это потому, что HTTP-запрос внутри вашей службы выполняется асинхронно. Чтобы преодолеть эту проблему, вы можете использовать функцию $ watchCollection, которая будет выполнена после изменения всего массива фильмов внутри фильмов. Служба:

app.controller('listController', ['$scope', 'moviesService', function($scope, moviesService) { 
    $scope.genres = ['All', 'Crime', 'Drama', 'Action', 'Comedy']; 

    $scope.allMovies = moviesService.getAllMovies(); 

    $scope.moviesByGenre = []; 

    $scope.selectedGenre = 'All'; 

    $scope.getMoviesByGenre = function() { 
     // code to get movies by genre goes here 
     // cant access $scope.allMovies from here, returns as an empty array 
    }; 
    $scope.$watchCollection('movies', function (newValue) { 
     getMoviesByGenre(); 
    }); 
}); 

Answer 2

getMovies асинхронный функция $ http.get, так что вам нужно использовать обратный вызов, как это,

var app = angular.module('myApp', []); 

app.factory('moviesService', ['$http', function($http) { 
    var getMovies = function (callback) { 

     $http.get('js/data.json').success(function(data) { 
      var allMovies = []; 

      angular.forEach(data, function(movies) { 
       allMovies.push(movies); 
      }); 

      callback(allMovies); 
     }) 
    } 

    return { 
     getAllMovies: getMovies 
    }; 
}]); 

app.controller('listController', ['$scope', 'moviesService', function($scope, moviesService) { 
    $scope.genres  = ['All', 'Crime', 'Drama', 'Action', 'Comedy']; 
    $scope.moviesByGenre = []; 
    $scope.selectedGenre = 'All'; 

    $scope.getMoviesByGenre = function() { 
     moviesService.getAllMovies(function (allMovies) { 
      console.log(allMovies);  
     }); 
    }; 
}]) 

или использовать promises

Answer 3

Я думаю, что вы перепутаны с помощью getMovies() внутри завода. getMovies() callback должен возвращать результат запроса ajax, не нажимая на другую переменную из-за асинхронного вызова ajax.

var getMovies = function() { 
    $http.get('js/data.json').success(function(data) { 
     return data; 
    }); 
} 

return { 
    getAllMovies: getMovies 
};