current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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!

share|improve this question
    
you have bind the mouseover event and even for that you don't have need jQuery.Here is link docs.angularjs.org/api/ng/directive/ngMouseover –  Arpit Srivastava Jul 31 '14 at 4:13
    
In my current scenario your solution works fine. But I am curious to know why none of the inline jQuery inside directives work. Why the debugger does not get hit? –  vighnu Jul 31 '14 at 4:17
    
@vighnu Show your directive code that does not work. Show us how you added the jquery code inside your directive. –  bhantol Jul 31 '14 at 6:37
    
@bhantol Updated the question. –  vighnu Jul 31 '14 at 7:15

2 Answers 2

up vote 0 down vote accepted

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

  1. document is ready
  2. jQuery binds hover to .fd-effect elements (there are none)
  3. Angular does some rendering
  4. 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

share|improve this answer
    
I have updated the question. –  vighnu Jul 31 '14 at 7:15
    
No kidding. Its a totally different question now. –  craigb Jul 31 '14 at 7:26
up vote 0 down vote

Short answer:

Angular does not perform compilation of Javascript in HTML templates i.e. the does not get recognized by the browser even though you may see the DOM showing it.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.