Angular.js Insert javascript after linking

Question

I created a custom element directive which inserts an element inside the DOM and adds some javascript code for that element. My code looks like the following:

myDirective:

return {
   restrict: 'E',
   templateUrl: 'template.html',
   scope: {
     name: '@name'
   },
   controller: MyController,
   controllerAs: 'vm',
   bindToController: true
};

template.html:

<div id="{{vm.name}}" />
<script type="text/javascript">
  var plugin = chart.generate({bindTo: '#{{vm.name}}'});
</script>

My call:

<my-directive name="test" />

The problem is that the injected javascript tries to generate a chart inside the div with id "test" but fails because at this stage angular hasn't yet inserted {{vm.name}} as the element id. How can I separate this javascript code so that it gets executed after angular inserts the id of the element? I looked up the post link method but am not sure if this is the right way to do.

//EDIT: To clarify: Basically I want to create a directive, which gets a parameter passed by an attribute (name) and uses this parameter to set it as the id of a div and use some javascript code to generate a chart inside that div.

The post link method is definitely the right way to do it! Just make a wrapper directive around what you already have and call var plugin = chart.generate({bindTo: '#{{vm.name}}'}); in that directives postLink method. — Pepijn
– Pepijn, Commented Sep 17, 2015 at 13:08
@Pepijn is right. You should avoid having scripts that aren't contained within the Angular ecosystem as you will run into problems like this. — sdgluck
– sdgluck, Commented Sep 17, 2015 at 13:12
I thought it is called a wrapper directive if you make use of another directive inside the template of the first directive? Can you provide a short code snippet? I don't really understand what you mean. — Juli
– Juli, Commented Sep 17, 2015 at 13:13
this is exactly what directives were made for. i left you a code example in the comments — dcohenb
– dcohenb, Commented Sep 17, 2015 at 13:16

dcohenb · Accepted Answer · 2015-09-17 13:14:13Z

1

You need to use the link function for that, also the template is pretty simple so you can have it inline..

return {
    restrict: 'E',
    template: '<div id="{{vm.name}}" />',
    scope: {
        name: '@name'
    },
    controller: MyController,
    controllerAs: 'vm',
    bindToController: true,
    link: function(scope, element, attr) {
        var plugin = chart.generate({
            bindTo: '#{{vm.name}}'
        });
    }
};

now i'm not sure how chart works but you should check if you can just give it the element instead of the selector and then you won't need the template at all.

link: function(scope, element) {
    var plugin = chart.generate({
        bindTo: element
    });
}

answered Sep 17, 2015 at 13:14

dcohenb

2,1271 gold badge18 silver badges34 bronze badges

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

1 Comment

Juli Over a year ago

Yeah, it works! I have to use the id instead of the element in bindTo. I guess because the element is the "outside" wrapper and I want to generate the chart in the newly inserted div. And I had to wrap the content of the link function inside of a $timeout(function () { }); block to avoid weird issues with the charting library.

Collectives™ on Stack Overflow

Angular.js Insert javascript after linking

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related