Question

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

然而，当我在指令中做同样的事情时，我得到一个更复杂的对象返回 - 一个包含$$状态，错误，成功，顶层的原型。

因为这是一个更复杂的对象，我无法弄清楚如何参考我之后的实际数据。

任何人都可以告诉我在传递数据时我出错了什么或我需要做什么来引用指令中的数据？当我在开发人员工具中查找树时，我会在此处找到实际数据：

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;
        });
    }]);

谢谢

Answer 1

使其适用于当前代码和最小变化的一种方法就是那样

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)
}]);

或

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
}]);

您还可以查看我的plunk，它演示了几种将数据从服务

中导入指令的方法

http://plnkr.co/edit/YOzP2VCPOXwh4qoQC73i?p=preview

AngularJS - 使用指令中服务的数据

1 个答案:

或