javascript - ng-change event not working -
i have created custom directive using angular js. have function inside controller i'm trying call on ng-change event text box. function not getting called. here code:
<script> var delightmeterapp = angular.module('delightmeterapp', []); delightmeterapp.directive('delightmeter', function () { return { scope: true, restrict: 'e', template: '<div id="delightmeter"></div>', link: function (scope, element) { 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); document.getelementbyid("arc1").setattribute("d", describearc(200, 200, 100, -90, -56)); document.getelementbyid("arc2").setattribute("d", describearc(200, 200, 100, -54, -20)); 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; } }, template: '<div id="delightmeter"></div>', controller: "delightmetercontroller" }; }); delightmeterapp.controller('delightmetercontroller', function ($scope) { $scope.fun = function () { alert("called"); } }); </script> following html
<div ng-app="delightmeterapp" ng-controller="delightmetercontroller"> <delight-meter ng-model="delightscore"></delight-meter> <input id="text1" type="text" ng-change="fun()" /> </div> is correct use same controller both custom directive , input control. doing wrong here?
sooraj,
like nexusduck says should never manipulate dom in controller. have reorganized code have dom manipulation in directive , controller call rotate needle function. rotate needle function called in directive.
this html
<div ng-controller="delightmetercontroller"> <delightmeter delight-meter-reference='delightmeterreference'></delightmeter> <input id="txtscore" type="text" ng-model="delightscore" ng-change="delightmeterreference.rotateneedle(delightscore)" />{{delightscore}} </div> this directive:
.directive('delightmeter', function () { function link($scope, $element, $attrs) { var meter = $element[0]; console.log(meter); document.getelementbyid("arc1").setattribute("d", describearc(200, 200, 100, -90, -56)); document.getelementbyid("arc2").setattribute("d", describearc(200, 200, 100, -54, -20)); 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; } function rotateneedle(delightscore) { console.log(delightscore); $('.needleset').css({ "transform": "rotate(" + delightscore + "deg)", "transform-origin": "50% 95%" }); } if ($scope.delightmeterreference) { $scope.delightmeterreference.rotateneedle = function (delightscore) { rotateneedle(delightscore); } } } return { restrict: 'e', templateurl: 'components/comp01/comp01.html', scope: { delightmeterreference: '=' }, link: link }; }) and controller
.controller('delightmetercontroller', function ($scope) { $scope.delightscore = 0; $scope.delightmeterreference = {}; }) thanks, shivas
Comments
Post a Comment