从控制器到指令的异步数据:未知提供程序错误

时间:2015-04-07 16:19:10

标签: angularjs asynchronous angularjs-directive angularjs-scope

我想实现一个带有隔离范围的指令和一个双向绑定到异步加载数据的控制器范围。

部分HTML:

<body ng-app = 'authorGraph' ng-controller = 'GraphCtrl'>
<graph-dir/>

使用Javascript:

var authorGraph = angular.module('authorGraph', []);

authorGraph.directive('graphDir', function () {
return {
    scope: {
     graphData: '=' //two way binding 
    },
    restrict: 'E',
    link: function (scope, element) {
        //do something with D3.js to visualise the data here
    }
};

浏览互联网时,我发现承诺可以解决问题(此代码在指令实现之前出现)

authorGraph.config(function($routeProvider) {
$routeProvider.when('/',
    {
        controller: 'GraphCtrl',
        resolve: {
            getData: function ($http) {
                return $http.get('graph_data.json').then(function (data) {
                    return data;
                });
            }
        }
    });
});

authorGraph.controller('GraphCtrl', function GraphCtrl($scope, getData) {
    $scope.graphData = getData;
});

但是,我坚持错误

  

未知提供者:getDataProvider&lt; - getData

1 个答案:

答案 0 :(得分:0)

authorGraph.controller('GraphCtrl', function GraphCtrl($scope, getData) {
    $scope.graphData = getData;
});

在上面的代码中,当你注入一些东西作为依赖时,它将开始寻找appropriae提供者。在你的情况下,它看起来是getDataProvider,它找不到任何服务。

当您使用resolve时,返回的解析参数将在您的$scope对象中可用。你不需要把它作为依赖注入。

以上代码应为:

authorGraph.controller('GraphCtrl', function GraphCtrl($scope) {
    $scope.graphData = $scope.getData;
});