別のコントローラの内部からモデルを更新する

Question

フォームを送信した後に、新しいデータ行をテーブルにプッシュしようとしています。しかし、UrlListCtrlと呼ばれるテーブルには、UrlFormCtrlで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!'; 
     } 
    } 

あるフォーム、異なっている、私は保存するデータベースに配列を送信しています、その後私は、ビューを更新したいと思い、 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を更新するにはどうすればよいですか？

Answer 1

私はあなたの質問を完全に理解しているとは確信していませんが、とにかく答えてみます。

他のコントローラで値が変更された変数を更新しようとしていますか？

これは、serviceが役に立ちます。ここで

は基本的な手順は次のとおりです。

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

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

}) 

：

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

    return{ 
     urls: urls 
    } 
}]) 

あなたはその新しい値を取得したいのコントローラに$watchを入れて：サービスで

、あなたは、変数があること持っています

次に、別のコントローラから変更します。

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

    ServiceName.urls.push('newValue'); 

}) 

これはそれを行う必要があります。 $scope.urlsは、2番目のコントローラーで変更されても、最初のコントローラーで更新されます。

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

UrlListCtrl内$watchを置く：

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に割り当てられることを保証します。