Aggiornamento del modello dall'interno di un altro controller

Question

Sto provando a inviare una nuova riga di dati a una tabella, dopo aver inviato il modulo. Tuttavia, la tabella, che si chiama UrlListCtrl è diversa dalla forma, che è 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, io mando un allineamento al database per essere memorizzati, poi vorrei aggiornare la visualizzazione, dove lo gestisce UrlListCtrl.

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

Sto provando a inviare i nuovi dati a $scope.url. Ecco il servizio:

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


    } 

Sto ancora cercando di capire Angolare, quindi questo è piuttosto complicato per me. Come posso aggiornare $scope.urls da UrlFormCtrl?

Answer 1

Non sono sicuro di aver capito completamente la tua domanda, ma proverò a rispondere comunque =).

Quindi si sta tentando di aggiornare una variabile il cui valore è stato modificato in un altro controller?

Ecco dove service può essere utile.

Ecco i passaggi fondamentali:

Nel servizio, si ha che la variabile:

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

    return{ 
     urls: urls 
    } 
}]) 

Metti $watch in un controller, in cui si desidera ottenere che il nuovo valore:

myApp.controller('FirstController', function(...){ 

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

}) 

Quindi, lo si cambia da un altro controller:

myApp.controller('SecondController', function(...){ 

    ServiceName.urls.push('newValue'); 

}) 

Questo dovrebbe farlo. $scope.urls verrà aggiornato nel primo controller anche se è stato modificato nel secondo.

Il concetto di $watch potrebbe essere nuovo per voi. Quindi esegue fondamentalmente una funzione di callback, ogni volta che la prima funzione restituisce un nuovo valore. Cioè, ogni volta che cambia la variabile che viene guardata.

Nel tuo caso:

si avrà una variabile all'interno del vostro servizio:

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

mettere un $watch all'interno UrlListCtrl:

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

Quindi, modificare il valore di urls da 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!'; 
    } 
} 

Il $watch si mette dentro UrlListCtrl assicurerà che il nuovo valore verrà assegnato a $scope.urls all'interno UrlFormCtrl.