AngularJS $http无法执行get请求

5
我有一个关于在AngularJS中从多个源触发$http.get的问题。下面的代码非常简单:我有一个名为$scope.test的函数,它是HTML中一个按钮的单击处理程序。这个$http.get可以正常工作。接下来,我有一个$http.get,它从服务器获取一些数据并创建基本原始图表。非常简单,这也可以正常工作。然后,我想在每个图表节点上添加按钮,并在按钮处理程序上执行另一个$http.get呼叫。但这个不起作用!以下是代码:
$scope.test = function () {
    console.log('Klic na ID 1');
    $scope.commonController.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) {
            commonController.error('Pri branju delovnih mest je prišlo do napake: '+data.description);
        });
};


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

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

var buttons = [];
buttons.push(new primitives.orgdiagram.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) {
        commonController.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 = orgUnitsData.orgUnits[0].title;
    rootItem.description = orgUnitsData.orgUnits[0].description;        
    rootItem.id = orgUnitsData.orgUnits[0].id;
    rootItem.hasSelectorCheckbox = false;
    rootItem.image = "http://www.basicprimitives.com/demo/images/photos/a.png";

    $scope.addItems(rootItem, orgUnitsData.orgUnits[0].subordinates, 0);
    jQuery(".basicdiagram").orgDiagram(options);


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

我尝试了很多创建此图表的组合(指令、单独的模板和控制器等),但都没有成功。从图表中的按钮进行的 $http.get 调用不起作用(在 Chrome 开发者工具的网络选项卡中没有任何东西)。

但有趣的是:如果我再次执行测试函数(点击 HTML 按钮),我会从测试函数及来自图表按钮的 $http.get 获得响应。看起来 $http.get 调用图表按钮正在等待某些内容的出现,当这些内容出现时它才会触发。

有人有什么解决此问题的想法吗?执行测试、执行图表按钮函数、再次执行测试的情况下,控制台输出如下(粗体是来自图表按钮函数的控制台条目,非粗体是来自测试函数的):

Click on ID 1 Click on ID 1 OK Click on ID 4 Click on ID 1 Click on ID 1 OK Click on ID 4 OK

如果您对此有任何想法,请告诉我,这让我疯狂了几个小时。 更新

我通过在 https://github.com/angular/angular.js/issues/2794#issuecomment-18807158 找到的解决方案中使用 $scope.$apply 包装了我的调用函数来解决这个问题。

$scope.$apply(function() {
    console.log('Klic na ID ' + data.context.id);
    $scope.commonController.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) {
        commonController.error('Pri branju delovnih mest je prišlo do napake: '+data.description);
    });
});

最好的问候


尝试在代码中添加 scope.$apply()。 - Ajay Beniwal
在哪里?我认为$apply()不能解决问题,因为问题是$http.get没有触发,而不是结果没有在UI中呈现。 - Sobis
你是说像我在问题更新中写的那样吗?如果是的话,你一直是对的,只是我不知道你的意思。 - Sobis
1个回答

7

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接