Как я могу повторно создать контроллер AngularJS после изменения данных?

Question

Я посмотрел и предположил, что это просто, но просто не мог понять документацию API для этого.

Предположим, у меня есть контроллер, который извлекает данные при первом вызове (я уезжаю из тонны, конечно):

myCtrl = function ($scope, Data) { 
    $scope.data = []; 

    data_promise = Data.getData(); //a $http service 
    data_promise.success(function (data) { 
    $scope.data = data; 
    }); 
} 

Это прекрасно работает, и при загрузке страницы я получаю $ scope.data так как мне это нужно. Однако, конечно, пользователь может пожелать обновить данные. Предположим, простой сервис «Data.save()» вызывается, когда сервер нажимает кнопку «сохранить» в форме:

myApp.factory('Data', function ($http) { 
    save: function (data) { 
    $http({ 
     method: 'POST', 
     url: 'someURL', 
     data: data, 
    }).success(function(){ 
     //something here that might trigger the controller to refresh 
    }); 
    }; 
}); 

Что бы я поставил в обратный вызов, который может повторно создать экземпляр контроллера таким образом, что имеет самые последние данные с сервера? В настоящее время мне нужно обновить страницу, чтобы получить обновленные данные. Сейчас я не беспокоюсь о минимизации запросов на сервер, обналичивая результаты и изменения. Мне просто нужно заставить это работать в первую очередь.

Спасибо!

Answer 1

OK, хотя я уверен, что есть лучший ответ. У меня есть один для меня. По сути, я беру важные части контроллера и помещаю их в обратный вызов успеха. Чтобы он не выглядел беспорядочным, я обернул все части контроллера, которые необходимо обновить в названной функции.

myCtrl = function ($scope, Data, $q) { 

// Binding the Data 
    var updateAll; 
    updateAll = function() { 

    $scope.data1 = []; 
    $scope.data2 = []; 
    $scope.data3 = []; 
    $scope.data4 = []; 

    service_promise1 = Data.getData1(); //a $http service 
    service_promise2 = Data.getData2(); 
    service_promise3 = Data.getData3(); 
    service_promise4 = Data.getData4(); 

    $q.all([service_promise1,service_promise2,service_promise3,service_promise4]) 
    .then(function([service1,service2,service3,service]){ 
     $scope.data1 = service1 + service2 //I know this isn't valid Javascript 
     // just for illustration purposes 
     $scope.data2 = service2 - service1 + service 3 
     //etc... 
    }); 
    }; 
    updateAll(); 


//Form Section 
$("#myForm').dialog({ 
    buttons: { 
    Save: function() { 
     Data.save(data).success(function(){ 
      updateAll(); 
     }); 
     } 
    } 
    }); 
} 

Ломая это вниз, я обернул все поручения объектов области, которые полагаются на услугах в функцию UpdateAll и вызывающих его на инстанциации myCtrl. В форме, которая обновляет данные, я вызываю функцию updateAll() при успешном выполнении функции Data.save().

Не совсем хирургия головного мозга, я соглашусь, но я смутился с $ scope. $ Apply() и думал о просто вызове myCtrl(). Это как-то показалось «угловым» способом, но не сработало. Я предполагаю, что функция контроллера запускается только один раз на странице обновления, и нет углового способа вызвать его снова.

Answer 2

Обновление не требуется. Просто измените обновленные данные в ControllerScope.

Это должно сработать.

myApp.factory('Data', function ($http) { 
    save: function (data, $scope) { 
    $http({ 
     method: 'POST', 
     url: 'someURL', 
     data: data, 
    }).success(function(){ 
     $scope.data = newData; 
     //something here that might trigger the controller to refresh 
    }); 
    }; 
}); 

// in your controller 
Data.save(data, $scope); 

Но: Вы не должны делать это так. Это выглядит беспорядочно. Используйте службы или события, которые вы наблюдаете, чтобы ждать изменений, возвращаемых из службы.