从另一个控制器内部更新模型

Update model from inside of another controller

本文关键字：更新 模型 内部 控制器 另一个      更新时间：2023-09-26

我试图在提交表单后将新数据行推到表中。然而，表UrlListCtrl不同于表UrlFormCtrl. 

  function UrlFormCtrl($scope, $timeout, UrlService) {
    $scope.message = '';
    var token = '';
    $scope.submitUrl = function(formUrls) {
      console.log('Submitting url', formUrls);
      if (formUrls !== undefined) {
        UrlService.addUrl(formUrls).then(function(response){
          $scope.message = 'Created!';
          // I need to update the view from here
        });
      } else {
        $scope.message = 'The fields were empty!';
      }
    }

在UrlFormCtrl中，我发送一个数组到数据库进行存储，之后我想更新视图，其中UrlListCtrl处理它。

  function UrlListCtrl($scope, $timeout, UrlService){
    UrlService.getUrls().then(function(response){
      $scope.urls = response.data;
    });
  }

我正试图将新数据推送到$scope.url。以下是服务:

  function UrlService($http) {
    return {
      addUrl: addUrl,
      getUrls: getUrls
    }
    function addUrl(formUrls) {
      console.log('adding url...');
      return $http.post('urls/create', {
        original_url: formUrls.originalUrl,
        redirect_url: formUrls.redirectUrl
      });
    }
    function getUrls() {
      return $http.get('urls/get');
    }

  }

我还在努力理解Angular，所以这对我来说相当复杂。如何从UrlFormCtrl中更新$scope.urls ?

我不确定我完全理解你的问题，但我会尽量回答它=)。

所以你试图更新一个变量的值被改变在另一个控制器?

这就是service可以发挥作用的地方。

以下是基本步骤:

在服务中，你有这个变量:

myApp.service('ServiceName', ['$http', function(){
   var urls = [];
   return{
       urls: urls
   }
}])

把$watch放在一个控制器中，在那里你想获得新的值:

myApp.controller('FirstController', function(...){
    $scope.$watch(function () {
        return ServiceName.urls;
    }, function (newVal) {
        $scope.urls = newVal;
    });
})

然后，从另一个控制器更改它:

myApp.controller('SecondController', function(...){
    ServiceName.urls.push('newValue');
})

这个应该可以了。$scope.urls将在第一个控制器中更新，即使它在第二个控制器中更改。

$watch的概念对您来说可能是新的。它基本上执行一个回调函数，每当第一个函数返回一个新值。也就是说，当被监视的变量发生变化时。

在你的例子中:

你将在你的服务中有一个变量:

function UrlService($http) {
    var urls = [];
    function addUrl(formUrls) {
      console.log('adding url...');
      return $http.post('urls/create', {
        original_url: formUrls.originalUrl,
        redirect_url: formUrls.redirectUrl
      });
    }
    function getUrls() {
      return $http.get('urls/get');
    }
    return {
      addUrl: addUrl,
      getUrls: getUrls
      urls: urls
    }
}

将$watch放入UrlListCtrl:

function UrlListCtrl($scope, $timeout, UrlService){
    $scope.$watch(function () {
        return UrlService.urls;
    }, function (newVal) {
        $scope.urls = newVal;
    });
}

然后，将urls的值从UrlFormCtrl改为:

$scope.submitUrl = function(formUrls) {
  if (formUrls !== undefined) {
    UrlService.addUrl(formUrls).then(function(response){
      $scope.message = 'Created!';
      UrlService.urls = response['urls']; 
    });
  } else {
    $scope.message = 'The fields were empty!';
  }
}

UrlListCtrl中的$watch将确保将新值分配给UrlFormCtrl中的$scope.urls。

相关文章：