如何通过 Ajax 调用在 Angular 指令中获取数据？答案

【问题标题】：How to get data in Angular directive though Ajax calls?如何通过 Ajax 调用在 Angular 指令中获取数据？
【发布时间】：2017-06-12 03:00:50
【问题描述】：

如果我的标题与问题不完全匹配，请原谅我。我有一个自定义的 Angular 指令来动态生成剑道网格。我正在进行 Ajax 调用以从服务器获取配置。现在的问题是，指令首先被加载，然后 ajax 调用完成，因为它在我的指令中抛出错误。请让我知道是否有任何解决方法。

我的指令：

gridApp.directive('grid', function () {
return {
    restrict: "EA",
    scope: true,
    template: '<div kendo-grid="mainGrid" options="gridOptions"></div>',
    controller: function ($scope, $element, $attrs, gridService) {
        var gridConfig = gridService.getGridConfig(); //this is undefined. However, when I check in console it gets loaded once the directive is executed.

        //removed for breveity
    }
};

});

我的服务：

angularApp.factory('gridService', gridService);

function gridService($http, $q) {
    var getGridConfig = function (gridId) {
        var deferred = $q.defer();
        $http.get('/Base/GetGridConfiguration?GridId=' + gridId)
                    .then(function (response) {
                        deferred.resolve(response.data);
                    });
        return deferred.promise;
    }

    return {
        getGridConfig: getGridConfig
    };
}

【问题讨论】：

标签： javascript angularjs ajax angularjs-directive kendo-grid

【解决方案1】：

promise 是异步的。你需要使用.then

 gridService.getGridConfig()
    .then(function(data) {
       ////
       // code dependent on server response
       ////
    });

RFTDlink

【讨论】：

这是将我的控件放入 .then() 的标准方式吗？

【解决方案2】：

更改您的服务以返回延迟对象而不是数据。

return  $http.get('/Base/GetGridConfiguration?GridId=' + gridId)

解决指令中的承诺。

var gridConfig, _self = this;
gridService.getGridConfig().then((response) => {
    _self.gridConfig = response.data;
});

【讨论】：