Angularjs指令不'；得不到数据

我有一个从服务器获取数据并将其发送到控制器的服务：

publicApp.angularModule.controller('PublicResultCtrl', function ($scope, $location, resultService) {

    resultService.getResult().then(function (resultResponse) {
        $scope.data = resultResponse.data;
        $scope.graph = [];

        _.forEach($scope.data.TreningExerciseScores, function(item) {
            $scope.graph.push(addDataToGraph(item.Item2, item.Item1));
        });

    });

    var addDataToGraph = function (num, text) {
        return {
            y: num,
            legendText: text,
        };
    };

});

resultService.getResult().then(function (resultResponse) {
        $scope.data = resultResponse.data;
        $scope.graph = [];

        _.forEach($scope.data.TreningExerciseScores, function(item) {
            $scope.graph.push(addDataToGraph(item.Item2, item.Item1));
        });

    });

服务：

publicApp.angularModule.factory('resultService', function ($http) {
        return {
            getResult: function() {
                return $http.get("/Result/GetResult")
                    .success(function(result) {
                        return result.data;
                    }).error(function(result) {
                        console.log("error" + result);
                    });
            },
        };
    });

控制器：

publicApp.angularModule.controller('PublicResultCtrl', function ($scope, $location, resultService) {

    resultService.getResult().then(function (resultResponse) {
        $scope.data = resultResponse.data;
        $scope.graph = [];

        _.forEach($scope.data.TreningExerciseScores, function(item) {
            $scope.graph.push(addDataToGraph(item.Item2, item.Item1));
        });

    });

    var addDataToGraph = function (num, text) {
        return {
            y: num,
            legendText: text,
        };
    };

});

resultService.getResult().then(function (resultResponse) {
        $scope.data = resultResponse.data;
        $scope.graph = [];

        _.forEach($scope.data.TreningExerciseScores, function(item) {
            $scope.graph.push(addDataToGraph(item.Item2, item.Item1));
        });

    });

我有一个指令，它应该从控制器获取数据。我这样称呼指令：

<div id="graph" style="width: 200px; height: 200px" canvasjs graphData="graph"></div> 

---

但是scope.data是未定义的。我知道$http.get是异步操作，但不应该是作用域。$watch get updates

如果您要在控制器中处理承诺：

publicApp.angularModule.controller('PublicResultCtrl', function ($scope, $location, resultService) {

    resultService.getResult().then(function (resultResponse) {
        $scope.data = resultResponse.data;
        $scope.graph = [];

        _.forEach($scope.data.TreningExerciseScores, function(item) {
            $scope.graph.push(addDataToGraph(item.Item2, item.Item1));
        });

    });

    var addDataToGraph = function (num, text) {
        return {
            y: num,
            legendText: text,
        };
    };

});

resultService.getResult().then(function (resultResponse) {
        $scope.data = resultResponse.data;
        $scope.graph = [];

        _.forEach($scope.data.TreningExerciseScores, function(item) {
            $scope.graph.push(addDataToGraph(item.Item2, item.Item1));
        });

    });

无需在您的服务中处理：

getResult: function() {
                return $http.get("/Result/GetResult");
            },

如果您只想处理服务中的错误，那么您需要再次包装一个承诺。您可以使用

$q.when

进行此操作：

getResult: function() {
                return $http.get("/Result/GetResult")
                    .success(function(result) {
                        return $q.when(result.data);
                    }).error(function(result) {
                        // not sure what you want to do here
                        console.log("error" + result);
                        return $q.when(result);

                    });
            },

---

$q.when

将在对象周围包装一个承诺（如果它还不是承诺）。

如果要在控制器中处理该承诺：

publicApp.angularModule.controller('PublicResultCtrl', function ($scope, $location, resultService) {

    resultService.getResult().then(function (resultResponse) {
        $scope.data = resultResponse.data;
        $scope.graph = [];

        _.forEach($scope.data.TreningExerciseScores, function(item) {
            $scope.graph.push(addDataToGraph(item.Item2, item.Item1));
        });

    });

    var addDataToGraph = function (num, text) {
        return {
            y: num,
            legendText: text,
        };
    };

});

resultService.getResult().then(function (resultResponse) {
        $scope.data = resultResponse.data;
        $scope.graph = [];

        _.forEach($scope.data.TreningExerciseScores, function(item) {
            $scope.graph.push(addDataToGraph(item.Item2, item.Item1));
        });

    });

无需在您的服务中处理：

getResult: function() {
                return $http.get("/Result/GetResult");
            },

如果您只想处理服务中的错误，那么您需要再次包装一个承诺。您可以使用

$q.when

进行此操作：

getResult: function() {
                return $http.get("/Result/GetResult")
                    .success(function(result) {
                        return $q.when(result.data);
                    }).error(function(result) {
                        // not sure what you want to do here
                        console.log("error" + result);
                        return $q.when(result);

                    });
            },

---

$q.when

将在对象周围包装一个承诺（如果它还不是承诺）。

您不能在

success（）

处理程序中返回数据并期望它返回。您必须链接另一个承诺（return

defer.promise（）

），或者在控制器中执行

成功

，并修改结果中的$scope。或者只返回整个

$http

调用，这已经是一个承诺。

您不能在

success（）

处理程序中返回数据并期望它返回。您必须链接另一个承诺（return

defer.promise（）

），或者在控制器中执行

成功

，并修改结果中的$scope。或者只返回整个

$http

调用，该调用已经是一个承诺。

尝试将值传递给指令：

canvasjs=“graph”

在我的示例中，我模拟了来自服务和返回承诺的响应

HTML

<div ng-controller="fessCntrl">
    <div id="graph" style="width: 200px; height: 200px" canvasjs="graph"></div>
    <pre>   graph:  {{graph|json}}  </pre>
    <pre>   data:  {{data|json}}  </pre>  
</div>

---

演示

尝试将值传递给指令：

canvasjs=“graph”

在我的示例中，我模拟了来自服务和返回承诺的响应

HTML

<div ng-controller="fessCntrl">
    <div id="graph" style="width: 200px; height: 200px" canvasjs="graph"></div>
    <pre>   graph:  {{graph|json}}  </pre>
    <pre>   data:  {{data|json}}  </pre>  
</div>

---

演示

感谢您的建议，我已根据这些建议更改了代码，但仍有作用域。数据未定义可能您需要返回

$q.when（result）

而不是

result.data

。否则，您正在执行一个

结果.data.data

。我已经记录了$scope.graph，那里的一切都很好，所以我的服务没有问题，我相信问题出在Directive中。您在哪里记录？尝试在

resultService

和控制器中记录结果。看看你是否能在这两个属性上都看到

data

属性。你是对的

result。
resultService
中的data

未定义，

result

是对象，而controller中的一切都正常谢谢你的建议，我已经根据它们更改了代码，但是scope.data仍然是未定义的，您可能需要返回

$q.when（result）

，而不是

result.data

。否则，您正在执行一个

结果.data.data

。我已经记录了$scope.graph，那里的一切都很好，所以我的服务没有问题，我相信问题出在Directive中。您在哪里记录？尝试在

resultService

和控制器中记录结果。查看是否可以在这两个属性上都看到

data

属性。您是对的

result。在
resultService
中，data

未定义，

result

是对象，而在controller中则是一切ok@hyperN查看我的答案和演示。@hyperN查看我的答案和演示。