Angular JS: Javascript not working inside custom directive template

Question

I'm trying to create a custom directive in angular js with the below code.

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 <script>

 var app = angular.module('columnarAdditionApp', []);
 app.directive('addition', function () {
     return {
         restrict: 'E',
         templateUrl: 'template.html'
     };
 });
 </script>

 <body>
     <div ng-app="columnarAdditionApp" >
     <addition></addition>
     </div>
 </body>

my template.html file is as shown below

<div id="delightmeter"></div>
    <input id="value" type="text" />
    <button id="test">Click Here</button>

    <script>


            var newdiv = jQuery('<div/>', {
                id: 'delightContainer',
                class: 'singlenote'
            }).appendTo('#delightmeter');


            var appendstring = "";
            appendstring += "<svg width='500px' height='300px' version='1.1' xmlns='http://www.w3.org/2000/svg>'";
            appendstring += "<g>";
            appendstring += "<text x='100' y='220' fill='black'>0</text>";
            appendstring += "<text x='300' y='220' fill='black'>100</text>";
            appendstring += "<path class='arc' id='arc1' d='' />";
            appendstring += "<path class='arc' id='arc2' d='' />";
            appendstring += "<path class='arc' id='arc3' d='' />";
            appendstring += "<path class='arc' id='arc4' d='' />";
            appendstring += "<path class='arc' id='arc5' d='' />";
            appendstring += "<g class='needleset'>";
            appendstring += "<circle class='needle-center' cx='200' cy='200' r='5'></circle>";
            appendstring += "<path class='needle' d='M 195 198 L 200 100 L 205 202'></path>";
            appendstring += "</g></g></svg>";

            newdiv.append(appendstring);


            $("#test").click(function () {
                var rotateval = $("#value").val();
                $('.needleset').css({
                    "transform": "rotate(" + rotateval + "deg)",
                    "transform-origin": "50% 95%"
                });



            }
                  );

            document.getElementById("arc1").setAttribute("d", describeArc(200, 200, 100, -90, -56));
            document.getElementById("arc2").setAttribute("d", describeArc(200, 200, 100, -54, -20));`enter code here`
            document.getElementById("arc3").setAttribute("d", describeArc(200, 200, 100, -18, 16));
            document.getElementById("arc4").setAttribute("d", describeArc(200, 200, 100, 18, 52));
            document.getElementById("arc5").setAttribute("d", describeArc(200, 200, 100, 54, 90));

            function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
                var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;

                return {
                    x: centerX + (radius * Math.cos(angleInRadians)),
                    y: centerY + (radius * Math.sin(angleInRadians))
                };
            }

            function describeArc(x, y, radius, startAngle, endAngle) {

                var start = polarToCartesian(x, y, radius, endAngle);
                var end = polarToCartesian(x, y, radius, startAngle);

                var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";

                var d = [
                    "M", start.x, start.y,
                    "A", radius, radius, 0, arcSweep, 0, end.x, end.y
                ].join(" ");

                return d;
            }

          </script>

Only the textbox and button is being rendered. On inspecting element i can see that no contents are getting appended inside the delightmeter division. That is the javascript inside the template file is not getting executed. How can i rectify this?

Don't put script in templates! This is also not the angular way! — Michelangelo
– Michelangelo, Commented Apr 25, 2015 at 12:34

Michelangelo · Accepted Answer · 2015-04-25 12:39:47Z

2

What you should do is somehting like this, load in the controller with the template:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'First ';
});

app.directive('exampleDirective', function() {
  return {
    restrict: 'E',
    template: '<p>Hello {{name}}!</p>',
    scope: true,
    controller: "MainCtrl"
    }
})

answered Apr 25, 2015 at 12:39

Michelangelo

5,9785 gold badges36 silver badges51 bronze badges

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

2 Comments

Sooraj Over a year ago

Should i write the entire javascript inside my template in the controller and use it? Edit: Is there any way that i can keep it as a separate file?

Michelangelo Over a year ago

Yes! If you don't want all the trouble you are getting now, you should only work in the "Angular world". And I know that it is hard at first, but you will see the benefits afterwards. Also, loading in jQuery for DOM manipulation is a no go in the Angular world. When I was learning the basics I was adviced to throw out jQuery all together and just think about every step in the Angular way!

shivas · Accepted Answer · 2015-04-25 18:17:18Z

0

Sooraj,

If you have a lot of javascript in your directive you can move it to the directives "link" function.

Like Mikey says i did the same, of NOT using Jquery. Try that and you will see how easy it is to do things in Angular.

Shivas

answered Apr 25, 2015 at 18:17

shivas

92310 silver badges16 bronze badges

Collectives™ on Stack Overflow

Angular JS: Javascript not working inside custom directive template

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related