How to make one directive to wait for data from another directive in angularjs (even for $log)?

Question

I have seen so many answers to pass one directive data to another directive in angularjs but nothing is working for me.

I have a directive(readDirectoryContents) to read directory contents by dragging and dropping folder. Now I want to display this directory contents in a tree structure using another directive(buildTree).

First I created a directive

<readDirectoryContents>

and then got $scope.files from this directive and now I created another directive

<buildTree>

in which I want to use $scope.files, so the problem here is both

<readDirectoryContents> and <buildTree>

are loading at the same time making $scope.files to be [] in

<buildTree> directive.

How to make

<buildTree> to wait executing until we get $scope.files from <readDirectoryContents>. I am using console.log($scope.files); in my 

<buildTree> directive to display the "files" but it is always showing [] as <readDirectoryContents> and <buildTree> are getting executed at the same time.

Please remember that I am not asking about how to display $scope.files into UI, but I am asking about how to make execution of

<buildTree> wait until the <readDirectoryContents> directive execution is done.(just to get $scope.files from first directive to next).

This is something similar to make one promise to wait until we get the result from another promise but here I am asking in context of directives. How to make one directive execution wait until we get data from another directive.

Thanks in advance. I am using angularjs 1 in my code. My question is how to make console.log($scope.files) to do not display [] in

<buildTree> directive.

Have you considered using a file directory plugin which already exists, such as this one ? — Tim Biegeleisen
– Tim Biegeleisen, Commented Aug 8, 2017 at 1:49
Maybe you should update your question and let everyone know what you are actually doing here. — Tim Biegeleisen
– Tim Biegeleisen, Commented Aug 8, 2017 at 1:52
What type of scope does the directive use? None, inherited, or isolate scope? Does the directive have a controller? Or does it just use the postLink function? It would be helpful if you showed the code. — georgeawg
– georgeawg, Commented Aug 8, 2017 at 6:43
In general use expression & binding to communicate events from a directive. Use one-way < binding to receive model values. Use the $onChanges life-cycle hook to react to changes of the model. — georgeawg
– georgeawg, Commented Aug 8, 2017 at 6:46

L. Figueredo · Accepted Answer · 2017-08-08 02:28:49Z

Maybe you could implement a 'watch' in your buildTree directive.

Try do to this in you buildTree directive:

//You need to receive files in your scope, I am considering that your
//files is shared between your directives.
$scope.$watch('files', function (newValue, oldValue) {
    //The watch will execute everytime your files variable changes
    if(newValue === oldValue) {
        return;
    }

    //here you can set files to an internal variable of you directive
    // or call a function to build your tree again  

    $scope.intFiles = newValue;
});

Then you can build your tree using $scope.intFiles. Everytime that your files variable updates in readDirectoryContents, it should be reflected to your buildTree directive (logically to your watch).

Note that this is one of the possible solutions, and should solve your problem.

Please, take care about a lot of watches in your code, to avoid performance issues.

For more information, you could see the complete documentation about watches: $rootScope.Scope

Collectives™ on Stack Overflow

How to make one directive to wait for data from another directive in angularjs (even for $log)?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related