- 首页
- 其他开发
- 未执行 Angularjs 模板中脚本标记内的 Javascript
未执行 Angularjs 模板中脚本标记内的 Javascript
[英] Javascript inside script tag in an Angularjs template is not executed
本文介绍了未执行 Angularjs 模板中脚本标记内的 Javascript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个显示三个图像的简单指令.在鼠标悬停时，它应该从黑白切换到普通图像.下面给出的是指令内的代码.
<div class="row"><div class="col-md-4"><h3>实施例1/h3<div class="fd-fade1 fd-effect"><img src="http://i.imgur.com/yxAxCaK.jpg" class="fd-img1" alt="">
<!--/.fd-fade -->
<!--/.col-md-4 --><div class="col-md-4"><h3>实施例2/h3<div class="fd-fade2 fd-effect"><img src="http://i.imgur.com/jlattvQ.jpg" class="fd-img2" alt="">
<!--/.fd-淡入淡出 -->
<!--/.col-md-4 --><div class="col-md-4"><h3>实施例3/h3<div class="fd-fade3 fd-effect"><img src="http://i.imgur.com/XqtS5WA.jpg" class="fd-img3" alt="">
<!--/.fd-淡入淡出 -->
<!--/.col-md-4 -->
<script type="text/javascript">$(document).ready(function () {调试器；$('.fd-effect').hover(function () {$(this).children("img").stop().fadeIn('slow');//添加 .stop() 以防止事件链}， 功能 () {$(this).children("img").stop().fadeOut("slow");});//结束 .fd 效果});//结束 document.ready 函数
悬停的 jQuery 脚本如上所示(嵌入在模板中).
我的问题！！！
此代码不在 angularjs 指令中运行.事件调试器未命中.有人可以帮我理解为什么它不运行吗?
P.S 如果不在指令中，代码会运行.
--编辑..
因为这个问题对很多人来说太模糊了，让我澄清一下.
我有一个简单的角度指令，它使用模板.此模板包含 html 和内联 javascript 以呈现 3 张图像.
指令:
var app = angular.module('albumApp', []);app.directive('专辑', 函数 ($log) {返回 {限制:'E'，templateUrl: 'templates/default.htm',替换:真};}
这就是我所拥有的.html 是 default.htm 中的那个
在主 html 页面中，
我只是写，我希望 html 能够被呈现，jQuery 能够像正常一样执行.
<头><title>测试</title><头><身体><专辑/></html>
请注意:指令有效并且模板被渲染.但是模板内的脚本不起作用.我的疑问是为什么！
解决方案
此时 jQuery 代码运行并将 hover 事件绑定到 .fd-effect<返回的元素/code>，您的文档中很可能没有任何匹配的元素.在没有看到标记位置的上下文的情况下，我的猜测是它位于由 Angular 呈现的模板中，因此您的事件顺序是...
- 文档已准备就绪
- jQuery 将
hover 绑定到 .fd-effect 元素(没有) - Angular 做了一些渲染
- 一段时间后，您使用
fd-effect 类渲染了元素，但没有绑定事件处理程序
解决方案是编写一个指令来处理 DOM 操作(即 jQuery 位)
angular.module('myModule').directive('淡出', {限制:'A'，链接:函数(范围，EL，属性){$(el).hover(function () {$(el).children("img").stop().fadeIn('slow');}， 功能 () {$(el).children("img").stop().fadeOut("slow");});}})
并在标记中使用:
<!-- img 标记放在这里-->
见:
——编辑——
好的，经过完全修改后的问题，我看到 <script> 标记位于您正在渲染的模板中.不要这样做.为您的 DOM 操作使用指令.
我还没有确认，但我怀疑脚本标签被解释为脚本指令
参见:https://docs.angularjs.org/api/ng/directive/脚本
I have a simple directive that displays three images. On mouse hover, it should switch from black and white to normal image.
Below given is the code inside the directive.
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>
Example 1</h3>
<div class="fd-fade1 fd-effect">
<img src="http://i.imgur.com/yxAxCaK.jpg" class="fd-img1" alt="">
</div>
<!-- /.fd-fade -->
</div>
<!-- /.col-md-4 -->
<div class="col-md-4">
<h3>
Example 2</h3>
<div class="fd-fade2 fd-effect">
<img src="http://i.imgur.com/jlattvQ.jpg" class="fd-img2" alt="">
</div>
<!-- /. fd-fade -->
</div>
<!-- /.col-md-4 -->
<div class="col-md-4">
<h3>
Example 3</h3>
<div class="fd-fade3 fd-effect">
<img src="http://i.imgur.com/XqtS5WA.jpg" class="fd-img3" alt="">
</div>
<!-- /. fd-fade -->
</div>
<!-- /.col-md-4 -->
</div>
<script type="text/javascript">
$(document).ready(function () {
debugger;
$('.fd-effect').hover(function () {
$(this).children("img").stop().fadeIn('slow');
// add .stop() to prevent event chaining
}, function () {
$(this).children("img").stop().fadeOut("slow");
}); // end .fd-effect
}); // end document.ready function
</script>
</div>
The jQuery script for the hover is shown above (embedded inside the template).
My problem!!!
This code does not run inside an angularjs directive.Event the debugger does not get hit.
Could someone please help me understand why it does not run?
P.S The code does run if not inside a directive.
--edit..
Since the question is way too vague for many, let me clarify.
I have a simple angular directive , that uses a template . This template contains html and inline javascript to render out 3 images .
The directive :
var app = angular.module('albumApp', []);
app.directive('album', function ($log) {
return {
restrict: 'E',
templateUrl: 'templates/default.htm',
replace: true
};
}
This is all that I have .The html is the one present in the default.htm
In the main html page,
I just write and I expect the html to be rendered and jQuery to perform like normal.
<html ng-app="albumApp">
<head>
<title>Test</title>
<head>
<body>
<album />
</body>
</html>
Do note: The the directive works and the template gets rendered. But the script inside the template is not functioning. My doubt is why!
解决方案
At the point the jQuery code runs and binds the hover event to the elements returned by the .fd-effect, there most likely aren't any elements that match in your document. Without seeing the context of where that markup is my guess is it is in a template rendered by Angular so your order of events is...
- document is ready
- jQuery binds
hover to .fd-effect elements (there are none)
- Angular does some rendering
- sometime later you have rendered elements with class
fd-effect but no bound event handlers
The solution is to write a directive that handles the DOM manipulation (i.e. the jQuery bits)
angular.module('myModule')
.directive('fadeOut', {
restrict: 'A',
link: function(scope, el, attr) {
$(el).hover(function () {
$(el).children("img").stop().fadeIn('slow');
}, function () {
$(el).children("img").stop().fadeOut("slow");
});
}
})
and to use in markup:
<div fade-out>
<!-- img markup goes here -->
</div>
see:
— EDIT —
ok after a totally revised question I see that the <script> tag is in the template you are rendering. Don't do this. Use a directive for your DOM manipulations.
I haven't confirmed but I suspect that the script tag is being interpreted as the script directive
see: https://docs.angularjs.org/api/ng/directive/script
这篇关于未执行 Angularjs 模板中脚本标记内的 Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
