Stocker les données globalement d'un contrôleur à l'autre en utilisant le service

Question

Je suis nouveau sur angularjs. Je suis en train d'afficher la réponse ajax d'un contrôleur à un autre Ceci est contrôleur 1

app.controller("currentTaskCtrl", function ($scope, $http, $rootScope, currentTaskService) { 

    $scope.currentTaskTab = function() { 
    $http({ 
      url: '/index/tasktimer', 
      method: 'POST',   
      data : {"currentTask": "current"}, 
      headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'} 
     }).success(function(response) {     
       currentTaskService.saveData(response.task_name, response.estimated_hours, response.time_remaining, response.start_date, response.stop_date, response.actual_hours); 
      }).error(function(response) { 
       $scope.codeStatus = response || "Request failed" 
      });   
    }   
}); 

C'est contrôleur 2

app.controller("currentTaskTabCtrl", function ($scope, $rootScope, currentTaskService) { 

    $rootScope.$on('currentTaskService', function() { 
     $scope.data = currentTaskService.getData(); 
    }); 
}); 

C'est le service

app.service('currentTaskService', function($rootScope) { 
    this.saveData = function(tname, estimated_hours, time_remaining, start_date, stop_date, actual_hours) { 
     // Here the data gets saved in $rootScope.data 
    } 

    this.getData = function() { 
     return data; 
    } 
}); 

Ceci est du code HTML (contrôleur 2) où les données sont affichées

<div ng-controller="currentTaskTabCtrl"> 
    <table> 
    <thead> 
     <tr> 
     <th> # </th> 
     <th> Task Name </th> 
     <th> Estimated Hours </th> 
     <th> Time Remaining </th> 
     <th> Start Date </th> 
     <th> Stop Date </th> 
     <th> Actual Time </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="task in data"> 
     <td></td> 
     <td>{{task.task_name}}</td> 
     <td>{{task.estimated_hours}}</td> 
     <td>{{task.time_remaining}}</td> 
     <td>{{task.start_date}}</td> 
     <td>{{task.stop_date}}</td> 
     <td>{{task.actual_time}}</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

Answer 1

Vous pouvez suivre ceci:

1- inject $ rootScope à la fois de vos contrôleurs

2- mettre en œuvre le code ci-dessous à l'un d'entre eux comme un récepteur de données:

$rootScope.$on('transferDataEvent', function(event, data) { 
    // you will receive data here 
    }); 

3 - et pour un autre appel sous le code en tant qu'expéditeur de données

$rootScope.$emit('transferDataEvent', data); // send data 

$ sur fait un écouteur et $ émettent distribue l'événement vers le haut dans la hiérarchie de portée

Answer 2

Vous pouvez envoyer vos données à partir du contrôleur ainsi.

<div ng-app="myApp" ng-controller="myCtrl"> 
    <button ng-click="sendData();"></button> 
</div> 
<script> 
    var app = angular.module('myApp', []); 
    app.controller('myCtrl', function($scope, $http,$rootScope) { 
     function sendData($scope) { 
      var arrayData = [1,2,3]; 
      $rootScope.$emit('someEvent', arrayData); 
     } 
    }); 
    app.controller('yourCtrl', function($scope, $http,$rootScope) { 
     $rootScope.$on('someEvent', function(event, data) { 
      console.log(data); 
     }); 
    }); 
</script>