javascript 你如何处理 AngularJS 指令中的异步数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12497590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you handle asynchronous data in directives for AngularJS
提问by dnc253
This is a similar question to this one. I'm still seeing some issues with asynchronous data in my directives. Basically I have directives that I want to pass data into, and this data is fetched asynchronously. I started doing this with the scope property on the directive like this:
这是一个类似的问题这一个。我仍然在我的指令中看到一些异步数据问题。基本上我有我想要传递数据的指令，并且这些数据是异步获取的。我开始使用指令上的 scope 属性执行此操作，如下所示：
scope: {
myAsyncData: '='
}
In the link function I added a $watchso I could update my model based on a value is in the scope. Something like this:
在链接函数中，我添加了一个，$watch以便我可以根据范围内的值更新我的模型。像这样的东西：
scope.$watch(scope.foo, function() {
//logic based on myAsyncData
}
When I did this, I started getting javascript errors because the asynchronous data hadn't returned yet. This is what prompted me to post the question linked above. So, I then changed my $watchto something like this:
当我这样做时，我开始收到 javascript 错误，因为异步数据尚未返回。这就是促使我发布上面链接的问题的原因。所以，然后我$watch把我的改成了这样的：
scope.$watch(scope.foo, function() {
if (angular.isDefined(scope.myAsyncData))
{
//logic based on myAsyncData
}
}
When I do this, I don't get the javascript errors. However, the $watchdoesn't get run again when the data is returned, and so my view doesn't reflect the model correctly. I tried assigning$scope.fooin a $timeoutto trigger the watch after the data is returned, but that seems too dependent on timing and is not very robust.
当我这样做时，我没有收到 javascript 错误。但是，$watch返回数据时不会再次运行，因此我的视图没有正确反映模型。我尝试$scope.foo在$timeout数据返回后分配a以触发手表，但这似乎过于依赖时间并且不是很健壮。
My question is just what is the correct way of interacting with asynchronous data in the directive? I've seen some examples that get the data in the directive like this:
我的问题是在指令中与异步数据交互的正确方法是什么？我见过一些在指令中获取数据的示例，如下所示：
scope.$eval(attrs.myAsyncData);
This doesn't seem to change anything. Is there anything fundamentally different with this than the myAsyncData: '='above?
这似乎没有改变任何事情。这与myAsyncData: '='上述有什么根本不同吗？
I've started to wonder if I should just get the data through services, but it seems like there would be the exact same issues. I've also had the thought of getting the data directly in the directive, but I don't want to directive to be responsible for getting the data. I only want the directive to be responsible for displaying the data and updating the view as the user interacts with it.
我开始怀疑我是否应该通过服务获取数据，但似乎会有完全相同的问题。我也有过直接在指令中获取数据的想法，但我不想指令负责获取数据。我只希望指令负责显示数据并在用户与其交互时更新视图。
I may be missing something obvious on how this should be done, so any input would me much appreciated.
我可能会遗漏一些关于如何完成此操作的明显内容，因此我将不胜感激任何输入。
回答by danivicario
I couldn't understand very well the Misko Hevery's answer so I decided to use events, and they worked well for me.
我不太明白 Misko Hevery 的回答，所以我决定使用事件，它们对我来说效果很好。
In my controller, I loaded the data like this:
在我的控制器中，我加载了这样的数据：
$http({method: 'GET', url: 'js/datasets/ips-processed.json'}).
success(function(data, status, headers, config) {
//post load code here and...
$scope.$broadcast("Data_Ready");
In my directive, I put
在我的指令中，我把
return {
restrict: 'A',
scope: {
donutid: "=",
dataset: "="
},
link: function(scope, elements, attrs) {
scope.$on("Data_Ready", function (){
//here the functionality for this directive
Hope it helps to someone.
希望它对某人有所帮助。
回答by Matty J
Came across this answer looking for a solution to the same problem.
遇到这个答案，寻找同一问题的解决方案。
After much research, suggest that your use Misko Hevery's solution hereto delay loading of the Controller until loading of the XHR has 'resolved'.
经过大量研究，建议您在此处使用Misko Hevery 的解决方案来延迟控制器的加载，直到 XHR 的加载已“解决”。
This seems to have solved all of my 'asynchronous data loading in Directives' issues.
这似乎解决了我所有的“指令中的异步数据加载”问题。
回答by jaker
A little bit late - but I came accross this post with the same problem and resolved it by providing my $watchcall's watchExpressionparameter as a function.
有点晚了 - 但我遇到了这篇文章，遇到了同样的问题，并通过提供我的$watch调用watchExpression参数作为函数来解决它。
scope.$watch(function() {
return scope.foo;
},
function() {
//logic based on myAsyncData
}
);
