如何在指令的AngularJS处理异步数据 [英] How do you handle asynchronous data in directives for AngularJS

问题描述

这是一个类似的问题<一href=\"http://stackoverflow.com/questions/12220521/angularjs-how-to-handle-long-running-requests-for-data-needed-in-controller-se\">this 之一。我仍然看到在我的指示与异步数据的一些问题。基本上我有，我想通过数据转换成指令，而这一数据获取异步。我开始与scope属性上这样的指令，这样做：

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: {
    myAsyncData: '='
}

在链接功能我添加了一个 $观看，所以我可以更新我的基于价值模型的范围。事情是这样的：

In the link function I added a $watch so I could update my model based on a value is in the scope. Something like this:

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

当我这样做，我开始JavaScript错误，因为异步数据还没有回来。这是促使我张贴上面链接的问题。于是，我便改变了我的 $观看来是这样的：

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 $watch to something like this:

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

当我这样做，我不明白的JavaScript错误。但是， $观看返回数据时不会再次运行，所以我的观点并不正确反映模型。我想在一个 $超时分配 $ scope.foo 来触发手表返回数据后，但似乎过于依赖时间和不是很强劲。

When I do this, I don't get the javascript errors. However, the $watch doesn't get run again when the data is returned, and so my view doesn't reflect the model correctly. I tried assigning$scope.foo in a $timeout to trigger the watch after the data is returned, but that seems too dependent on timing and is not very robust.

我的问题是究竟什么是与指令异步数据交互的正确方法？我见过一些例子得到指令中的数据是这样的：

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);

这似乎并没有改变任何东西。有什么与此完全不同的比 myAsyncData：'='上方

This doesn't seem to change anything. Is there anything fundamentally different with this than the myAsyncData: '=' above?

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

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.

我可能失去了一些东西明显在这个应该怎么做，所以任何的投入将我多少AP preciated。

I may be missing something obvious on how this should be done, so any input would me much appreciated.

推荐答案

我无法理解非常好MISKO Hevery的回答，所以我决定用事件，他们的工作很适合我。

I couldn't understand very well the Misko Hevery's answer so I decided to use events, and they worked well for me.

在我的控制器，我装像这样的数据：

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");

在我的指示，我把

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.

这篇关于如何在指令的AngularJS处理异步数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！