Question

我在提交表单后尝试将新行数据推送到表中。但是，名为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，所以这对我来说非常复杂。如何在$scope.urls内更新UrlFormCtrl？

Answer 1

我不确定我完全理解你的问题，但无论如何我都会尝试回答它。）。

所以你试图更新一个在另一个控制器中改变了值的变量？

这就是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!';
  }
}

您放在$watch内的UrlListCtrl将确保新值将分配到$scope.urls内的UrlFormCtrl。

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

1 个答案: