AngularJS : invoking optional nested directive on template sub-element

Question

I'm trying to write a directive that emits all of the HTML for a field in a form - the wrapping div, label, input, etc. For some fields I want to use Angular UI Bootstrap's "typeahead" directive.

I first tried using, in the template, a ng-attr-typeahead='{{myTypeahead}}'. I expected that, on the fields where 'myTypeahead' is not set, that there would be no evidence of a "typeahead" attribute. Instead, during directive processing, the attribute is present in the attribute list with an undefined value, and the typeahead directive is invoked and promptly blows up because its input is undefined.

I then tried using a postcompile function like so:

    compile: function compile(tElement, tAttrs, transclude) {
        return function postLink(scope, iElement, iAttrs, controller) {
            if ( iAttrs.eiTypeahead !== undefined ) {
                var me = $(iElement);
                var input = $("input", me);
                input.attr("typeahead", iAttrs.eiTypeahead);
                $compile(input[0]);
            }
        }
    }

This puts the "typeahead" attribute on the input element, but does not invoke the typeahead directive.

I expect this is probably a duplicate of some other post, but I'm not searching on the right words to find it.

looks you need to manipulate DOM in compile compile: function compile(tElement, tAttrs, transclude) { if ( iAttrs.eiTypeahead !== undefined ) { var me = $(iElement); var input = $("input", me); input.attr("typeahead", iAttrs.eiTypeahead);} return function postLink(scope, iElement, iAttrs, controller) { $compile(input[0]); } } then compile it from postLink — Pankaj Parkar
– Pankaj Parkar, Commented Jun 26, 2015 at 18:48
@pankajparkar - Thanks, that worked very well, except that the typeahead directive doesn't then seem to work in my context - it doesn't complain, but doesn't activate. The cause may be irrelevant; I'm still trouble-shooting, in my spare time, since I've already spent days on this! %*&^%& If you want to write your comment up as an answer, I'll accept. Otherwise, I'll do it myself. If you have any pointers to helpful docs or posts re using nested directives, please include. — Ed Staub
– Ed Staub, Commented Jun 27, 2015 at 15:58

Community · Accepted Answer · 2017-05-23 12:14:14Z

1

While you are adding other directive to the your directive element then those should added from the compile function of your directive and you could compile directive element from the postLink function which return from the compile.

Code

compile: function compile(tElement, tAttrs, transclude) {
    if ( iAttrs.eiTypeahead !== undefined ) {
       var me = $(iElement);
       var input = $("input", me);
       input.attr("typeahead", iAttrs.eiTypeahead);
    }
    return function postLink(scope, iElement, iAttrs, controller) {
        $compile(input[0]);
    }
}

You could refer this answer for better explaination

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jun 27, 2015 at 18:51

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS : invoking optional nested directive on template sub-element

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related