Обновить шаблон при изменении области действия

Question

Обновить шаблон при изменении области действия

0

У меня есть шаблон, в котором я выводил значения (названия фильмов) из моей базы данных,

%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;

  }])

Peter Boomsma 25 авг. 2015, в 19:19

Источник

Теги:

angularjs

1 ответ

Ещё вопросы

JB Nizet · Accepted Answer · 2015-08-25T15-15-00.000Z

Ваш сервис не должен выполнять 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().

Да, это немного код Франкенштейна на данный момент. Собираюсь почистить, когда получу результат прототипа. Ваш совет помог мне! Пришлось исправить несколько вещей, но с отличным примером и советами я закончил это.