$scope does not update in Partial from Poller variable?

Question

I have a little problem where i cannot update the Poller.msgdata in the view each time the poller timeouts.

So what i am trying to do is receive Poller.msgdata and Poller.newdata TRUE or FALSE on condition from the Service, and then output this dynamically inside {{inbox}}. However $scope.inbox comes as empty since on first retrieval the data is Undefined, this not being the problem. Its the fact that the msgdata and newdata do NOT update when Poller timeouts.

{{inbox}} should be TRUE or FALSE and UPDATE accordingly each time. If you need more details please let me know.

app.controller("taskbarController", ['$scope', 'authData', '$location', 'projectsModal', 'sendMessageModal', 'Poller',
  function ($scope, authData, $location, projectsModal, sendMessageModal, Poller) {

    $scope.inbox = Poller.msgdata;
    $scope.project = Poller.newdata;
    $scope.projects = Poller.projects;
    $scope.messages = Poller.messages;

}]);

Here is the Poller that updates the msgdata and newdata:

app.factory('Poller', Poller);
Poller.$inject = ['$http', '$timeout'];

function Poller($http, $timeout) {

var projectcache = { response: [], calls: 0 };
var msgcache = { response: [], calls: 0 };
var newdata;
var msgdata;

var poller = function () {
  $timeout(poller, 5000);
   $http.get('http://localhost/app/controllers/php/getProjects.php')
   .then(function(r) {
     if (r.data.projects.length > projectcache.response.length) {
      newdata = true;
      projectcolor = 'green';
      angular.copy(r.data.projects, projectcache.response);
     } else {
      newdata = false;
      projectcolor = 'green';
     };
   });
   $http.get('http://localhost/app/controllers/php/getMessages.php')
   .then(function(m) {
     if (m.data.messages.length > msgcache.response.length) {
      msgdata = true;
      msgcolor = 'green'; 
      angular.copy(m.data.messages, msgcache.response);
     } else {
      msgdata = false;
      msgcolor = 'green';
     };
   });
};
poller();

return {
  projects: projectcache.response,
  messages: msgcache.response,
  newdata: newdata,
  msgdata: msgdata
};
};

And finally i display inside the partial as:

{{inbox}}

@A.J No Errors my friend and because well there is nothing really wrong with syntax. I am trying to find out how i would get the 2 $scope items to update when Poller updates their values? — , Jun 24 '15 at 13:41
Maybe try to set `$timeout(function () { $scope.$apply(); },5000)` in your Taskbar controller, to be sure the scope is realizing he's getting data? Else try $interval and log your variable each second to check if the content changes. — graphefruit, Jun 24 '15 at 13:47
@graphefruit does $apply target all scopes in controller? Or can you specify which ones to apply? Can you write as an answer and example. Thanks — , Jun 24 '15 at 16:43
Answer posted, did you already tried to set hardcoded values to your projectcache or msgcache, to check if this is working, and just the $http.get has problems? — graphefruit, Jun 25 '15 at 08:14

score 0 · Answer 1 · edited May 23 '17 at 12:14

here the example. What does $scope.$apply do: What does $scope.$apply() do?

app.controller("taskbarController", ['$scope', 'authData', '$location', 'projectsModal', 'sendMessageModal', 'Poller','$timeout','$interval',
  function ($scope, authData, $location, projectsModal, sendMessageModal, Poller,$timeout,$interval) {

    $scope.inbox = Poller.msgdata;
    $scope.project = Poller.newdata;
    $scope.projects = Poller.projects;
    $scope.messages = Poller.messages;

   $timeout(function ()
   {
      //Lets see if $scope.$apply does the magic and the data are set
      $scope.$apply();
      console.log($scope.inbox);
   },5000);

   //Call every second to see if the variable changes or not.
   $interval(function ()
   {

      console.log("check inbox:" + $scope.inbox);
   },1000);

}]);

If this doesn't help, try to set your variables in the $scope.$apply function: https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply

app.controller("taskbarController", ['$scope', 'authData', '$location', 'projectsModal', 'sendMessageModal', 'Poller','$timeout','$interval',
      function ($scope, authData, $location, projectsModal, sendMessageModal, Poller,$timeout,$interval) {

        $scope.inbox = "";
        $scope.project = "";
        $scope.projects = "";
        $scope.messages = "";

       $scope.$apply(function ()
       {
            $scope.inbox = Poller.msgdata;
            $scope.project = Poller.newdata;
            $scope.projects = Poller.projects;
            $scope.messages = Poller.messages;
       });

    }]);

$scope does not update in Partial from Poller variable?

1 Answers1