更改数据后,如何重新实例化AngularJS控制器?

时间:2013-04-27 19:50:08

标签: angularjs angularjs-service angularjs-controller

我看过了,并且假设这很简单,但却无法找到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
    });
  };
});

我会在成功回调中添加什么来重新实例化控制器,以便它具有来自服务器的最新数据?目前我不得不刷新页面以获取更新的数据。我现在并不担心通过兑现结果和更改来最小化服务器调用。我只需要先让它工作。

谢谢!

2 个答案:

答案 0 :(得分:0)

您无需刷新。只需更改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);

但是:你不应该这样做。这看起来很乱。使用您观看的服务或事件等待从服务返回的更改。

答案 1 :(得分:0)

好的,虽然我确信有一个更好的答案我有一个给我。基本上我正在接受控制器的重要部分并将它们置于成功回调中。为了防止它看起来凌乱,我已经将需要在命名函数中更新的控制器的所有部分包装起来。

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实例化时调用它。在更新数据的形式中,我在Data.save()函数成功时调用updateAll()函数。

不完全是大脑手术,我承认,但我已经与$ scope混淆了。$ apply()并考虑调用myCtrl()。这似乎是“Angular”的方式,但都没有奏效。我猜控制器功能只在页面刷新时运行一次,并且没有Angular方法再次调用它。