Json AngularJS-在指令中使用来自服务的数据

我已经设置了一个从服务器收集JSONP数据的服务。如果我使用console.log在服务中输出'data.d.results'，我会得到一个包含六项的简单数组对象

然而，当我在指令中执行同样的操作时，我得到了一个更复杂的返回对象——在顶层包含$$state、error、success和proto

因为这是一个更复杂的对象，我不知道如何引用我要查找的实际数据

谁能告诉我在传递数据时哪里出了问题，或者我需要做什么来引用指令中的数据？当我在developer tools中向下搜索时，我在这里找到了实际数据：

d > $$state > value > data > d > results > [0-5] > CardID

我的代码如下：

    app.directive('dashboardcard', ['DashboardCardService', function(DashboardCardService){
        return{
            restrict: 'E',
            link: function($scope, element, atttributes){
                $scope.data = DashboardCardService;
            },
            template: 'Card Name: {{CardID}}'
        };
    }]);    

    app.factory('DashboardCardService', ['$http', function($http){
        var request = {
            method: 'GET',
            url: '/api.svc/tbl_Card/',
            dataType: 'jsonp',
            useDefaultXhrHeader: false,
            headers: {'Content-type': 'application/json'},
            headers: {'Accept': 'application/json;odata=light;q=1,application/json;odata=verbose;q=0.5'},
            crossDomain: true
        };    

        return $http(request).success(function(data) {
            return data.d.results;
        });
    }]);

---

谢谢你

让它与你当前的代码一起工作的一种方法是这样的，并且最小的改动是这样的

app.directive('dashboardcard', ['DashboardCardService',   function(DashboardCardService){
    return{
        restrict: 'E',
        link: function($scope, element, atttributes){
            DashboardCardService.success(function(data){
              $scope.data = data
            });
        },
        template: 'Card Name: {{CardID}}'
    };
}]);    

app.factory('DashboardCardService', ['$http', function($http){
    var request = {
        method: 'GET',
        url: '/api.svc/tbl_Card/',
        dataType: 'jsonp',
        useDefaultXhrHeader: false,
        headers: {'Content-type': 'application/json'},
        headers: {'Accept': 'application/json;odata=light;q=1,application/json;odata=verbose;q=0.5'},
        crossDomain: true
    };    

    return $http(request)
}]);

或 您还可以检查我的plunk，它演示了从服务将数据放入指令的几种方法

---

$http

使用一些特殊方法返回一个承诺，当您使用

成功

时，传递的对象将是来自响应的数据，但当您使用

$http（）时，则（）

它将为您提供更复杂的对象，服务器响应将在

数据中
对象感谢maurycy-我已经在使用
success
了-如果
那么
提供了更复杂的对象，这不应该给简单的对象吗？我尝试了这两种方法，并且指令为这两种方法提供了相同的输出。是的，成功应该只接收服务器响应，顺便说一句，我看到您在
$http
中引用了到您自己的服务器的路径，调用是否必须是jsonp？否，数据来自一个WCF实体框架服务——我选择了JSONP，因为我认为这在Angular中是最容易使用的——还有什么更好的呢？你知道为什么
success
在我使用
console.log时在服务中提供了“简单”对象，而在指令中使用
console.log时提供了“复杂”对象吗？啊，我现在明白了，你实际上从你的工厂返回了
$http
承诺，而不是你得到不同对象的数据。我制作了一个plunker，介绍了将数据传递到指令的不同方法，也许它对您有用，除非您做了真正的x域工作，否则最好使用get或POST。非常感谢您的帮助。将“简单”对象放入指令中。现在我只需要弄清楚如何获得页面中显示的实际数据——在您提供的第一个解决方案中，它仍然是空白的。我想我必须告诉它我想归还六件物品中的哪一件？我最终会在一个ng的重复，所以我希望它会解决这对我来说。
app.directive('dashboardcard', ['DashboardCardService', function(DashboardCardService){
    return{
        restrict: 'E',
        link: function($scope, element, atttributes){
            $scope.dashboardService = DashboardCardService;
        },
        template: 'Card Name: {{dashboardService.data.CardID}}'
    };
}]);    

app.factory('DashboardCardService', ['$http', function($http){
    var service = {};
    var request = {
        method: 'GET',
        url: '/api.svc/tbl_Card/',
        dataType: 'jsonp',
        useDefaultXhrHeader: false,
        headers: {'Content-type': 'application/json'},
        headers: {'Accept': 'application/json;odata=light;q=1,application/json;odata=verbose;q=0.5'},
        crossDomain: true
    };    

    $http(request).success(function(data) {
       service.data = data.d.results;
    });
    return service
}]);