I have a question about firing $http.get from multiple sources in AngularJS. Code below is quite simple: I have $scope.test function which is click handler for one button in HTML. This $http.get works ok. Then I have $http.get which gets some data from server and creates basic primitives chart. Very simple and this works as well. And then, I would like to append button on every chart node and on button handler I would like to execute another $http.get call. But this one doesn't work!

Here is code:

$scope.test = function () {
    console.log('Klic na ID 1');
    $scopemonController.getData('orgunit/1?jsonDepth=3')
        .success(function(workpositionData,status,headers,config) {
            console.log('Klic na ID 1 OK');
            $scope.workPositions = workpositionData.workPositions;
        }).error(function(data,status,headers,config) {
            monController.error('Pri branju delovnih mest je prišlo do napake: '+data.description);
        });
};


var options = new primitivesdiagram.Config();    
var itemB, itemC, itemD, itemE;
var rootItem = new primitivesdiagram.ItemConfig();

options.rootItem = rootItem;
options.cursorItem = rootItem;
options.hasSelectorCheckbox = primitivesmon.Enabled.True;

var buttons = [];
buttons.push(new primitivesdiagram.ButtonConfig("add", "ui-icon-folder-open", "Add0"));     
options.buttons = buttons;

options.onButtonClick = function (e, data) {
    console.log('Klic na ID '+data.context.id);
    $http.get('proxy/api/orgunit/' + data.context.id + '?jsonDepth=3')
    .success(function(workpositionData,status,headers,config) {
        console.log('Klic na ID '+data.context.id + ' OK');
        $scope.workPositions = workpositionData.workPositions;
    }).error(function(data,status,headers,config) {
        monController.error('Pri branju delovnih mest je prišlo do napake: '+data.description);
    });                 
};

$http.get('proxy/api/orgunit/tree?jsonDepth=2')
.success(function(orgUnitsData,status,headers,config) {
    console.log('Reading orgunit tree ok');

    rootItem.title = orgUnitsDataUnits[0].title;
    rootItem.description = orgUnitsDataUnits[0].description;        
    rootItem.id = orgUnitsDataUnits[0].id;
    rootItem.hasSelectorCheckbox = false;
    rootItem.image = ".png";

    $scope.addItems(rootItem, orgUnitsDataUnits[0].subordinates, 0);
    jQuery(".basicdiagram")Diagram(options);


}).error(function(data,status,headers,config) {
    console.log('Reading orgunit not ok');
}); 

I tried a lot of binations of creating this chart (directive, separate template and controller, ...) but nothing works. $http.get call from button on chart note doesn't fire (nothing in Network in Chome Developer Tools).

But here is interesing this: if I execute test function another time (click on html button), I get response from test function AND from $http.get from chart button. It looks like $http.get call from chart button is waiting for something and when this something appers, it fires.

Does anyone have any idea what would be solution to this problem? Output in console for scenario execute test, execute chart button function, execute test is like this (bolded are console entries from chart button function, nonbolded from test function:

Klic na ID 1 Klic na ID 1 OK Klic na ID 4 Klic na ID 1 Klic na ID 1 OK Klic na ID 4 OK

If you have any idea about this please let me know, this thing is driving me crazy a few last hours. UPDATE

I solved it with solution, found here .js/issues/2794#issuement-18807158, so I wraped my call function with $scope.$apply.

$scope.$apply(function() {
    console.log('Klic na ID ' + data.context.id);
    $scopemonController.getData('orgunit/' + data.context.id + '?jsonDepth=3')
    .success(function(workpositionData,status,headers,config) {
        console.log('Klic na ID ' + data.context.id + ' OK');
        $scope.workPositions = workpositionData.workPositions;
    }).error(function(data,status,headers,config) {
        monController.error('Pri branju delovnih mest je prišlo do napake: '+data.description);
    });
});

Best Regards

I have a question about firing $http.get from multiple sources in AngularJS. Code below is quite simple: I have $scope.test function which is click handler for one button in HTML. This $http.get works ok. Then I have $http.get which gets some data from server and creates basic primitives chart. Very simple and this works as well. And then, I would like to append button on every chart node and on button handler I would like to execute another $http.get call. But this one doesn't work!

Here is code:

$scope.test = function () {
    console.log('Klic na ID 1');
    $scope.monController.getData('orgunit/1?jsonDepth=3')
        .success(function(workpositionData,status,headers,config) {
            console.log('Klic na ID 1 OK');
            $scope.workPositions = workpositionData.workPositions;
        }).error(function(data,status,headers,config) {
            monController.error('Pri branju delovnih mest je prišlo do napake: '+data.description);
        });
};


var options = new primitivesdiagram.Config();    
var itemB, itemC, itemD, itemE;
var rootItem = new primitivesdiagram.ItemConfig();

options.rootItem = rootItem;
options.cursorItem = rootItem;
options.hasSelectorCheckbox = primitives.mon.Enabled.True;

var buttons = [];
buttons.push(new primitivesdiagram.ButtonConfig("add", "ui-icon-folder-open", "Add0"));     
options.buttons = buttons;

options.onButtonClick = function (e, data) {
    console.log('Klic na ID '+data.context.id);
    $http.get('proxy/api/orgunit/' + data.context.id + '?jsonDepth=3')
    .success(function(workpositionData,status,headers,config) {
        console.log('Klic na ID '+data.context.id + ' OK');
        $scope.workPositions = workpositionData.workPositions;
    }).error(function(data,status,headers,config) {
        monController.error('Pri branju delovnih mest je prišlo do napake: '+data.description);
    });                 
};

$http.get('proxy/api/orgunit/tree?jsonDepth=2')
.success(function(orgUnitsData,status,headers,config) {
    console.log('Reading orgunit tree ok');

    rootItem.title = orgUnitsDataUnits[0].title;
    rootItem.description = orgUnitsDataUnits[0].description;        
    rootItem.id = orgUnitsDataUnits[0].id;
    rootItem.hasSelectorCheckbox = false;
    rootItem.image = "http://www.basicprimitives./demo/images/photos/a.png";

    $scope.addItems(rootItem, orgUnitsDataUnits[0].subordinates, 0);
    jQuery(".basicdiagram")Diagram(options);


}).error(function(data,status,headers,config) {
    console.log('Reading orgunit not ok');
}); 

I tried a lot of binations of creating this chart (directive, separate template and controller, ...) but nothing works. $http.get call from button on chart note doesn't fire (nothing in Network in Chome Developer Tools).

But here is interesing this: if I execute test function another time (click on html button), I get response from test function AND from $http.get from chart button. It looks like $http.get call from chart button is waiting for something and when this something appers, it fires.

Does anyone have any idea what would be solution to this problem? Output in console for scenario execute test, execute chart button function, execute test is like this (bolded are console entries from chart button function, nonbolded from test function:

Klic na ID 1 Klic na ID 1 OK Klic na ID 4 Klic na ID 1 Klic na ID 1 OK Klic na ID 4 OK

If you have any idea about this please let me know, this thing is driving me crazy a few last hours. UPDATE

I solved it with solution, found here https://github./angular/angular.js/issues/2794#issuement-18807158, so I wraped my call function with $scope.$apply.

$scope.$apply(function() {
    console.log('Klic na ID ' + data.context.id);
    $scope.monController.getData('orgunit/' + data.context.id + '?jsonDepth=3')
    .success(function(workpositionData,status,headers,config) {
        console.log('Klic na ID ' + data.context.id + ' OK');
        $scope.workPositions = workpositionData.workPositions;
    }).error(function(data,status,headers,config) {
        monController.error('Pri branju delovnih mest je prišlo do napake: '+data.description);
    });
});

Best Regards

• javascript
• http
• angularjs
• get

• try to put scope.$apply() in the code – Ajay Singh Beniwal Commented Jul 17, 2013 at 13:48
• Where exactly? I think $apply() won't solve problem, because problem is that $http.get is not firing and not that results aren't redering in UI. – Sobis Commented Jul 17, 2013 at 13:57
• You mean like I wrope in question update? If yes, you were right all the time, I just didn't know what you meant. – Sobis Commented Jul 18, 2013 at 5:28

1 Answer 1

Starting from angular 1.1.4 you need to call $http in the context of an angular digest loop. If you do not do so then you can manually call $scope.$apply(); after the http call. See https://github./angular/angular.js/issues/2431#issuement-18566595