Reputation: 69
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
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