Question

我有一个模板，我在其中输出数据库中的值（电影标题），

%div{"ng-repeat" => "movie in movies"}
  {{ movie.title }}

用户可以输入电影标题的模板

%div{"ng-controller" => "searchCtrl", :id => "container_search"}
  #addMovie{"ng-controller" => "addMovieCtrl"}
    %div{"ng-click" => "addMovie()"}
      %input{:type => "text", "ng-model" => "title"}
      addMovie action.

当用户在输入字段中键入电影标题并单击div时，它会保存到数据库中，当我刷新页面时，我可以看到结果。但我希望这是异步发生的（同时，对吧？）。

这是控制器，

angular.module('addMovieseat')

  .controller('movieOverviewCtrl', [
    '$scope', 'movieService', function($scope, movieService) {

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

这是服务，

angular.module('addMovieseat')

  .factory('movieService', ['$http', function($http) {
    return $http.get('movies.json')
      .success(function(data) {
        return data;
      })
      .error(function(err) {
        return err;
      });
  }])

  .factory('movies', ['$http', function($http){
    var o = {
      movies: []
    };

    o.create = function(movie){
      return $http.post('/movies.json', movie).success(function(data){
        o.movies.push(data);
      });
    };

    return o;

  }])

Answer 1

您的服务不应该在实例化后立即执行HTTP请求，然后始终返回相同的结果。相反，它应该提供一种允许拍摄电影的方法。

完成后，您可以在保存新电影后立即再次呼叫该服务：

angular.module('addMovieseat')

  .factory('movieService', ['$http', function($http) {
    return {
      loadMovies: function() {
        return $http.get('movies.json');
      }
    };
  }])

  .factory('movies', ['$http', function($http){
    return {
      create: function(movie) {
        return $http.post('/movies.json', movie);
      }
    };
  }]);

现在您的控制器可以完成

angular.module('addMovieseat')
  .controller('movieOverviewCtrl', [
    '$scope', 'movieService', 'movies', function($scope, movieService, movies) {

     var init = function() {
       movieService.loadMovies().then(function(response) {
         $scope.movies = response.data;
       });
     };
     init();

     $scope.save = function() {
       movies.create({title: $scope.title}).then(init);
     };
  }]);

请注意，通过定义两个服务而不仅仅是具有loadMovies()和create()函数的服务，您将使自己的生活变得更加复杂。

更改范围时更新模板

1 个答案: