CODEWITHSUNDEEP
angularjs
Danman06
Danman06

Reputation: 69

AngularJS $interval and REST Calls

I've been struggling with getting $interval to work. So I was hoping everyone here could straighten me out. Here's my case..

I have a page, that contains a 'update' button. when that button is clicked it's calling a REST service to update a row in a table. On the backend we have a process that monitors that field and runs when it see's the value submitted. Once this process is done it changes the value to completed.

What I'm trying to do is once that button is clicked, a div will display with the status of 'Submitted'. then I want to use $interval to poll that field(via a REST call) and change my view once it's moved to a value of 'completed'. In short change the view from 'Submitted' to 'Completed'.

My problem is when the button is clicked, and I make my rest call if I set my 'data table' on the scope I get

TypeError: Cannot set property 'clst_rfrstatus_data_table' of undefined

If I change it up and declare the data table like so

var refreshStatus_data_table = StatusService.getRefreshStatus().get({cluster: $stateParams.cluster});
 refreshStatus_data_table.$promise.then(function (data) {
            for (var x = 0; x < data.message.length; x++) {
                $scope.refresh_status = (data.message[x].status == "null") ? data.message[x].status = "" : data.message[x].status; 
                $scope.$digest;
            }
        });
    },3000);
..snip..

I get

ConsoleAgent: TypeError: Cannot set property 'refresh_status' of undefined

I'm not following if I am not in scope or what.. Any help is appreciated.

Code:

myapp-routes.js

myAppconfig(function ($stateProvider, $urlRouterProvider) {
'use strict';
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('status_page', {
        url: '/status_page/:cluster',
        templateUrl: 'views/clusters/status_page.html',
        controller: 'StatusController'
    })
..snip..

Controller

clusterApp.controller('StatusController',['$scope','$interval','$state','$stateParams','StatusService', function ($scope, $interval, $state, $stateParams, StatusService) {
$scope.refresh_status = "";
$scope.ButtonClick = function ($scope) {
$scope.refreshStatus_data_table = StatusService.getRefreshStatus().get({cluster: $stateParams.cluster});
    $interval( function(){
        $scope.refreshStatus_data_table.$promise.then(function (data) {
            for (var x = 0; x < data.message.length; x++) {
                $scope.refresh_status = (data.message[x].status == "null") ? data.message[x].status = "" : data.message[x].status;

                $scope.$digest;
            }
        });
    },3000);
..snip..
} //end controller

view

<div>
<input type="button" value="Update" ng-click="ButtonClick()" />
      Status: {{refresh_status}}
</div>

Upvotes: 1

Views: 486

Answers (1)

bstockwell
bstockwell

Reputation: 514

Your method header for ButtonClick expects you to pass in the $scope, but you are calling it without anything, so the local $scope variable is undefined in your method body. You shouldn't need to pass $scope though:

$scope.ButtonClick = function () {
...
}

Upvotes: 1

Related Questions