Question

经过一番研究，我无法找到问题的答案。

我有一个从数据库中获取数据的控制器，我把一些数据放在一个表中（在其他地方使用）。

Employees.getEmployees() // A service that return $http.get ...
        .success(function(data) {               
            $scope.employees = data;         
        });

$scope.salesData = [];
angular.forEach($scope.employees,function(employees){
    $scope.salesData.push(employees.totalSales);
});

我想在指令中使用这个$ scope.salesData，用D3JS创建一个图表。

angular.module('dirDonut', [])
.directive("linearChart", function($window) {
return{
    restrict: "EA",
    link: function(scope, el, attrs){

        // retrieve datas from the Controller
        var data=scope[attrs.chartData];

        // Here the code creates the chart ...
    }
  };
});

然后，在HTML中：

<div linear-chart chart-data="salesData"></div>

问题是指令中根本没有检索到数据。我有错误：无法读取未定义的属性'长度'。如果我对Controller中的值进行硬编码，它将起作用。

有什么建议吗？对不起，如果我在另一篇文章中错过了答案，我没有看到像我这样的情况。

Answer 1

这是一个同步问题。您的指令在服务返回数据之前编译，因此scope[attrs.charData]未定义。

您需要做的是等待数据可用：

app.directive("linearChart", function($window) {
    return{
        restrict: "EA",
        link: function(scope, el, attrs){
            scope.$watch(function() { 
                return scope[attrs.chartData]; 
            }, function(value) {
                var data = value;
                // Here the code creates the chart ...
            });    
        }
    };
});

Working Plunk

您可以详细了解$watch函数here。

如何在指令中使用/同步控制器的数据？

1 个答案: