html - Angular JS: Javascript not working inside custom directive template -
i'm trying create custom directive in angular js 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 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 textbox , button being rendered. on inspecting element can see no contents getting appended inside delightmeter division. javascript inside template file not getting executed. how can rectify this?
what should somehting this, load in controller 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" } }) 
Comments
Post a Comment