ng-change событие не работает

Question

Я создал пользовательскую директиву, используя Angular JS. У меня есть функция внутри контроллера, которую я пытаюсь вызвать событие ng-change из текстового поля. но функция не вызвана. Вот мой код:

<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> 

Ниже мой HTML

<div ng-app="delightMeterApp" ng-controller="delightMeterController"> 
    <delight-meter ng-model="delightScore"></delight-meter> 
    <input id="Text1" type="text" ng-change="fun()" /> 
</div> 

Правильно ли использовать тот же контроллер и для пользовательской директивы и контроля ввода. Что я здесь делаю неправильно?

Answer 1

Sooraj,

Как что NexusDuck говорит, что вы никогда не должны манипулировать DOM в контроллере. Я реорганизовал ваш код, чтобы манипулировать DOM в Директиве и контроллере, чтобы просто вызвать функцию Rotate Needle. Функция Rotate Needle вызывается в Директиве.

Это 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> 

Это ваша директива:

.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 
    }; 
}) 

И это ваш контроллер

.controller('delightMeterController', function ($scope) { 

    $scope.delightScore = 0; 
    $scope.delightMeterReference = {}; 


}) 

Спасибо, Shivas