Question

在我看来，我有以下指令：

<line-chart data="buildData(id)" options="buildOptions(id)" />

在我的控制器中我有：

var onGetData = function (response) {
  return response.data;
}

$scope.buildData = function(id) {
  dataService.getDataById(id).then(onGetData);
}

在我的指示中，我有：

function lineChartLink($http){
  return function(scope, element, attrs) {
    chart.bindData(scope.data);
  }
}

现在，我的问题是，如何获得线图指令所需的数据？

Answer 1

你需要在这里做出选择。

如果要将数据传递给指令，那么在数据可用之前，您不应该调用指令。您可以使用简单的ng-if：

轻松完成此操作

$scope.buildData = function(id) {
    dataService.getDataById(id).then(function(response) {
        $scope.data = response.data
    });
};
$scope.buildData(someId);

并在视图中：

<line-chart ng-if="data" data="data" ... />

或者您可以将promise传递给指令，并且该指令应该在promise上调用then()以获取可用的数据：

var onGetData = function (response) {
    return response.data;
};

$scope.buildData = function(id) {
    // note the return here. Your function must return something: 
    // the promise of data
    return dataService.getDataById(id).then(onGetData);
};

function lineChartLink($http){
    return function(scope, element, attrs) {
        scope.data.then(function(theActualData) {
            chart.bindData(theActualData);
        });
    };
}

并在视图中：

<line-chart data="buildData(id)" ... >

或者，第三种解决方案，您可以将id传递给指令而不是数据，并让指令自行获取数据。

AngularJS获取服务承诺的结果以绑定到指令值

1 个答案: