Angularjs模板中脚本标记内的Javascript未执行答案

【问题标题】：Javascript inside script tag in an Angularjs template is not executedAngularjs模板中脚本标记内的Javascript未执行
【发布时间】：2014-07-31 04:07:52
【问题描述】：

我有一个显示三个图像的简单指令。在鼠标悬停时，它应该从黑白切换到正常图像。下面给出的是指令内的代码。

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

悬停的 jQuery 脚本如上所示（嵌入在模板中）。

我的问题！！！

此代码不在 angularjs 指令中运行。调试器未命中事件。有人可以帮我理解为什么它不运行吗？

P.S 如果不在指令中，代码确实会运行。

--编辑..

因为这个问题对很多人来说太模糊了，让我澄清一下。

我有一个简单的角度指令，它使用模板。此模板包含 html 和内联 javascript 以呈现 3 张图像。

指令：

var app = angular.module('albumApp', []);
app.directive('album', function ($log) {
    return {
        restrict: 'E',
        templateUrl: 'templates/default.htm',
        replace: true
};
}

这就是我所拥有的。html 是 default.htm 中存在的那个

在主html页面中，

我只是写，我希望 html 能够被渲染并且 jQuery 能够像平常一样执行。

<html ng-app="albumApp">
   <head>
     <title>Test</title>
   <head>
   <body>
      <album />
   </body>
</html>

请注意：指令有效并且模板被渲染。但是模板内的脚本不起作用。我怀疑是为什么！

【问题讨论】：

你已经绑定了鼠标悬停事件，即使你不需要jQuery。这里是链接docs.angularjs.org/api/ng/directive/ngMouseover
在我目前的情况下，您的解决方案运行良好。但我很想知道为什么内联 jQuery inside 指令都不起作用。为什么调试器没有命中？
@vighnu 显示你的指令代码不起作用。向我们展示您如何在指令中添加 jquery 代码。
@bhantol 更新了问题。

标签： jquery angularjs angularjs-directive

【解决方案1】：

我知道这已经过时了，但如果有人正在构建一个非常模块化的应用程序，其中模板需要其他任何地方都不需要的特定脚本，这里接受的答案可能不适合他们。

我一直在挖掘，发现 Angular 使用的 JQlite 不允许在模板中使用 <script> 标签。

但是，您可以在主页上加载 Angular 之前包含 JQuery，然后 Angular 将使用 JQuery 而不是 JQlite，您将能够运行您的自定义 @ 987654324@ 每个模板中的标签。

这是一个完全按照问题要求做的解决方案，而且不会妥协！

参考资料：

Google 小组讨论为什么它不起作用https://groups.google.com/forum/#!topic/angular/H4haaMePJU0/discussion

我在哪里找到了有用的答案（请参阅@TheSharpieOne 的评论）：Dynamically loading AngularJS modules from within Templates (Views)

【讨论】：

如何在 angular5 中做到这一点？

【解决方案2】：

在 jQuery 代码运行并将hover 事件绑定到.fd-effect 返回的元素时，很可能在您的文档中没有任何匹配的元素。在没有看到该标记所在的上下文的情况下，我猜测它位于 Angular 呈现的模板中，因此您的事件顺序是...

文档已准备就绪
jQuery 将hover 绑定到.fd-effect 元素（没有）
Angular 做了一些渲染
稍后您已经渲染了具有 fd-effect 类但没有绑定事件处理程序的元素

解决方案是编写一个指令来处理 DOM 操作（即 jQuery 位）

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

并在标记中使用：

<div fade-out>
    <!-- img markup goes here -->
</div>

见：

——编辑——

在一个完全修改的问题之后，我看到<script> 标记在您正在呈现的模板中。不要这样做。为您的 DOM 操作使用指令。

我还没有确认，但我怀疑脚本标签被解释为脚本指令

见：https://docs.angularjs.org/api/ng/directive/script

【讨论】：

不开玩笑。现在这是一个完全不同的问题。
人们找到了一种解决方法，让 Angular 使用 JQuery 而不是 JQlite。检查我的答案stackoverflow.com/a/37989673/4884034

【解决方案3】：

简答：

Angular 不会在 HTML 模板中执行 Javascript 的编译，即即使您可能看到 DOM 显示它，浏览器也无法识别它。

【讨论】：