角JS：Javascript不工作在自定義指令模板內

我想用下面的代碼在角JS中創建自定義指令。角JS：Javascript不工作在自定義指令模板內

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

我template.html文件如下圖所示

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

只有文本框和按鈕被渲染。在檢查元素我可以看到沒有內容被追加delightmeter司內。這是模板文件中的JavaScript沒有執行。我該如何糾正這一點？

來源

2015-04-25 Sooraj Chandran

請勿將腳本放在模板中！這也是**不是**的角度！ – Michelangelo

你應該做的是服用點這樣的，在與模板控制器負載：

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" 
    } 
})

來源

2015-04-25 12:39:47 Michelangelo

我應該在控制器中的模板中寫入整個javascript並使用它嗎？編輯：有什麼辦法，我可以把它作爲一個單獨的文件？ –

是的！如果你現在不想要所有的麻煩，你應該只在「角度世界」工作。而且我知道起初很難，但你會看到後來的好處。另外，在jQuery中加載DOM操作在Angular世界中是不可行的。當我學習基礎知識時，我被建議把jQuery全部扔在一起，只是想一想Angular的每一步！ – Michelangelo

Sooraj，

如果你有很多你的指令的JavaScript，你可以將其移動到指令「鏈接」功能。

就像Mikey說的那樣，我沒有使用Jquery。試試看，你會發現在Angular中做事很容易。

Shivas

來源

2015-04-25 18:17:18 shivas

角JS：Javascript不工作在自定義指令模板內

回答

相關問題