Defer processing of directive in AngularJs

Question

I have the need to defer the processing of a directive nested inside another one until an asynchronous operation is performed by the nesting directive. This is easily done with two lines of JQuery, but I was wondering if there was a purely Angular way to do the same, maybe using $q.

In http://jsfiddle.net/4smtgs3f/1/ you can find an example of what I mean:

<div ng-controller="MyCtrl">
    <loadData url="http://ip.jsontest.com/">
        <transformAndOutput/>
    </loadData>
</div>

loadData is loading data from some URI, while one or more transformers handle the processing and display of the data. BTW, in the JSFiddle I use two different loadData directives: loadData1 uses $http asynchronously and fails to load the data in time, while loadData2 uses JQuery $.ajax synchronously and works very well.

So the problem is: $http only works asynchronously, and the inner directive is processed before the asynchronous loading operation has completed. Is there an angular way to obtain the same result?

I know that it is possible to defer the execution of a user-defined function, using then or $q or something, but can I defer the processing of a directive? How would I do?

Thanks for all you can do.

FV

Hugo Wood · Accepted Answer · 2014-08-22 16:30:13Z

You are not thinking 'the Angular way' enough yet. :)

Timing issues

You create the directive content inside the link function, which means all your content has to be available at that time. As you have noticed, this is a wrong assumption. The content must be allowed to update when new data is available (i.e. when asynchronous operations complete).

The Angular way of manipulating the DOM is two-way bindings. The idiomatic way of displaying content in place of the directive is to write a template for the directive.

function myDirective() {
    return {
        ...
        template: '<div>{{someVar}}</div>',
        ...
    };
}

Using this technique, the DOM will update every time content is updated (that's why we use Angular right?). Add a template to your transformAndOutput directive, and remove the elm.append line in the link function. Now, when the asynchronous callback updates content, the DOM will update to reflect the change.

DEMO

You will notice that in this new demo, both lines show The value of content as called by loadData2 is: 2.0.171.17, which is not what you expect. This brings us to a second issue.

Scoping

Directives generally should have their own, isolated scope, so that they don't 'dirty' the host scope, or cause conflict with other components. In the code you provided, your two directives both modify their host scope by reading and writing to scope.data and scope.callingFunction, so there is a conflict.

To make a directive have its own scope, use the scope option.

function myDirective() {
    return {
        ...
        scope: true,
        ...
    };
}

The directive scope does not inherit the host scope. You can, however, import some data from the host scope. I will not detail that here since it is not needed to answer the question. Please refer to Angular's Guide to Directives.

On the other hand, a nested directive's scope does inherit from the scope of parent directives. This means the transformAndOutput directive can access the properties of the scope of its parent loadData. You should encode that transformAndOutput requires a parent loadData by adding a require: '^loadData' option to transformAndOutput (in the demo it is either loadData1 or loadData2 so I could not add this option).

Add scope: true to your loadData1 and loadData2 directives so that they each have their own content and callingFunction. The previous holder for those variables - the controller - can now be safely removed.

DEMO

A last minor thing: your directive should use HTML-like names (lower case + dashes) in the HTML and JS-like names (camel case) in JS. The conversion is automatically handled by Angular.

Final code

app.directive('loadData1', function($http) {
    return {
        restrict: 'E',
        replace: true,
        scope: true,
        link: function(scope, elm, attrs) {
            scope.callingFunction = 'loadData1'
            // the following to remove bad CORS warnings
            delete $http.defaults.headers.common['X-Requested-With'];   
            $http.get(attrs.url).success(function(data) {
                scope.content = data.ip;
            })  
        },
    };
})


app.directive('transformAndOutput', function() {
    return {
        restrict: 'E',
        scope: true,
        template: '<p>The value of content as called by {{callingFunction}} is: {{content}}</p>',
    };
})

Just wanted to mention that if the poster doesn't want the text to show until the response comes back, simply change the template to: <p ng-show="content">
Ok. I get it. Thanks to both Hugo and @tdakhla, this answers a lot. BTW, I assume that if I wanted to process the result of the asynchronous operation before displaying it, I cannot use a template function (which I believe is executed before the end of the loading), but I need to create functions and directives placed inside the template, am I right?
I don't know what you mean by "template function". I assume you want the processing done by transformAndOutput. In the link function of transformAndOutput, add a processing function to the scope. Then, in the template, call this function, passing content as a parameter. See this fiddle. You could also use scope.$watch.
Dear people. You all talk about simple to achieve operations that AngularJS will never fullfill. It was faster to program it in plain JavaScript (using ajax and some custom and simple as hell template functions) than writing and studying those above essay. Users just need a toll tha is easy to use. People just neeg the data from external source to be loaded and ready before AngularJS uses and renders the html.

Collectives™ on Stack Overflow

Defer processing of directive in AngularJs

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related