Question

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

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

请注意：该指令有效，模板会被渲染。但模板内的脚本无法正常运行。我怀疑是为什么！

Answer 1

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

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

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

这是一个完全解决问题并且不会妥协的解决方案！

参考文献：

Google小组讨论无法正常工作的原因https://groups.google.com/forum/#!topic/angular/H4haaMePJU0/discussion

我找到了一个有用的答案（见@TheSharpieOne的评论）：Dynamically loading AngularJS modules from within Templates (Views)

Answer 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

Answer 3

简短回答：

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

不执行Angularjs模板中脚本标记内的Javascript

3 个答案: