AngularJS directive using templateURL loaded template

Question

I'm trying to create a directive which would dynamically add content of template into DOM. Just like angular-datePicker does.

I would like to have such a directive as an attribute directive. I would use it for example for button. When button is clicked, form shows up. Technically I was thinking about using link function, binding a callback to element onClick event and add template content inside that callback using element.insertAfter method.

Problem is, I don't have access to template loaded by templateURL. And second problem is default behaviour of attribute directive - it automatically appends template as a child of the element. Is there any way how to disable it?

Ben Jacobs · Accepted Answer · 2014-09-17 15:43:48Z

1

It sounds like you want a little more custom behavior, and this is totally easy to script within your directive.

Basic steps:

fetch the template using the $http service
compile the template - referencing scope

insert template wherever you want into the DOM

angular.module('myModule').directive('myDirective', function ($http, $compile) {
    var directive = {};

    directive.restrict = 'A';
    directive.link = function (scope, elem, attr) {
        var templateString = '';

        $http.get('[ path to template ]').then(function (response) {
            templateString = response.data;

            var compiledHtml = $compile(templateString)(scope); // compile with scope variables

            element.append(compiledHtml); // change this around to insert your element into the DOM
        });

    };

    return directive;
});

answered Sep 17, 2014 at 15:43

Ben Jacobs

2,5264 gold badges25 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

AngularJS directive using templateURL loaded template

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