Update model from another controller

Question

I am trying to push a new row of data to a table after submitting a form. However, the table called UrlListCtrl is different from the form that 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!'; } } 

In UrlFormCtrl I send an array to the database to be saved, after which I want to update the view where UrlListCtrl processes it.

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

I am trying to push new data to $scope.url . Here is the service:

  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'); } } 

I'm still trying to understand Angular, so for me it is quite difficult. How can I update $scope.urls from UrlFormCtrl ?

Answer 1

I'm not sure I fully understand your question, but I will try to answer it anyway =).

So, are you trying to update a variable whose value has been changed on another controller?

This is where service can be useful.

Here are the basic steps:

In the service you have this variable:

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

Put $watch in one controller where you want to get this new value:

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

Then you change it from another controller:

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

That should do it. $scope.urls will be updated in the first controller, even if it was changed in the second.

The concept of $watch may be new to you. Thus, it basically performs a callback function when the first function returns a new value. That is, whenever a variable that is being viewed changes.

In your case:

You will have a variable inside your service:

 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 } } 

Put a $watch inside UrlListCtrl :

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

Then change the urls value to 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 placed inside UrlListCtrl ensures that the new value will be assigned to $scope.urls inside UrlFormCtrl .