Question

这是与this one类似的问题。我仍然在我的指令中看到异步数据的一些问题。基本上我有指令，我想将数据传入，并且这些数据是异步获取的。我开始使用指令的scope属性这样做：

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: '='有什么根本不同的东西？

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

我可能会遗漏一些关于应该如何做的明显的事情，所以任何输入都会让我非常感激。

Answer 1

我无法理解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

希望对某人有所帮助。

Answer 2

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

经过大量研究后，建议您使用Misko Hevery's solution here延迟加载控制器，直到加载XHR已“解决”。

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

Answer 3

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

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

如何在AngularJS的指令中处理异步数据

3 个答案: