角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没有执行。 我该如何纠正这一点?
你应该做的是服用点这样的,在与模板控制器负载:
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"
}
})
我应该在控制器中的模板中写入整个javascript并使用它吗? 编辑:有什么办法,我可以把它作为一个单独的文件? –
是的!如果你现在不想要所有的麻烦,你应该只在“角度世界”工作。而且我知道起初很难,但你会看到后来的好处。另外,在jQuery中加载DOM操作在Angular世界中是不可行的。当我学习基础知识时,我被建议把jQuery全部扔在一起,只是想一想Angular的每一步! – Michelangelo
Sooraj,
如果你有很多你的指令的JavaScript,你可以将其移动到指令“链接”功能。
就像Mikey说的那样,我没有使用Jquery。试试看,你会发现在Angular中做事很容易。
Shivas
请勿将脚本放在模板中!这也是**不是**的角度! – Michelangelo