9

这是一个与此类似的问题。我仍然在我的指令中看到一些异步数据问题。基本上，我有要向其中传递数据的指令，并且这些数据是异步获取的。我开始使用指令上的范围属性执行此操作，如下所示：

scope: {
    myAsyncData: '='
}

在链接函数中，我添加了一个$watch，因此我可以根据范围内的值更新我的模型。像这样的东西：

scope.$watch(scope.foo, function() {
    //logic based on myAsyncData
}

当我这样做时，我开始收到 javascript 错误，因为异步数据尚未返回。这就是促使我发布上面链接的问题的原因。所以，然后我将我的更改$watch为这样的：

scope.$watch(scope.foo, function() {
    if (angular.isDefined(scope.myAsyncData))
    {
        //logic based on myAsyncData
    }
}

当我这样做时，我没有收到 javascript 错误。但是，$watch返回数据时不会再次运行，因此我的视图无法正确反映模型。我尝试$scope.foo在数据返回后分配一个$timeout来触发手表，但这似乎过于依赖时间并且不是很健壮。

我的问题是在指令中与异步数据交互的正确方法是什么？我已经看到了一些在指令中获取数据的示例，如下所示：

scope.$eval(attrs.myAsyncData);

这似乎并没有改变任何东西。这与myAsyncData: '='上述有什么根本不同吗？

我开始怀疑我是否应该只通过服务获取数据，但似乎会有完全相同的问题。我也想过直接在指令中获取数据，但我不想让指令负责获取数据。我只希望指令负责显示数据并在用户与之交互时更新视图。

我可能会遗漏一些关于如何做到这一点的明显内容，因此我将非常感谢任何输入。

4

3 回答 3

14

我不能很好地理解 Misko Hevery 的答案，所以我决定使用事件，它们对我很有效。

在我的控制器中，我加载了这样的数据：

$http({method: 'GET', url: 'js/datasets/ips-processed.json'}).
        success(function(data, status, headers, config) {

 //post load code here and...
 $scope.$broadcast("Data_Ready");

在我的指令中，我把

return {
            restrict: 'A',
            scope: {
                donutid: "=",
                dataset: "="
            },
            link: function(scope, elements, attrs) {
                scope.$on("Data_Ready", function  (){
//here the functionality for this directive

希望它对某人有所帮助。

于 2014-02-28T15:59:38.367 回答
6

遇到这个答案，寻找相同问题的解决方案。

经过大量研究，建议您在此处使用 Misko Hevery 的解决方案来延迟控制器的加载，直到 XHR 的加载“解决”。

这似乎解决了我所有的“指令中的异步数据加载”问题。

于 2013-03-12T03:10:53.447 回答
5

有点晚了 - 但我遇到了同样的问题，并通过提供我$watch的调用watchExpression参数作为函数来解决它。

scope.$watch(function() {
        return scope.foo;
    },
    function() {
        //logic based on myAsyncData
    }
);
于 2015-03-13T11:56:24.917 回答