vighnu vighnu - 4 months ago 92x
AngularJS Question

Javascript inside script tag in an Angularjs template is not executed

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">
Example 1</h3>
<div class="fd-fade1 fd-effect">
<img src="" class="fd-img1" alt="">
<!-- /.fd-fade -->
<!-- /.col-md-4 -->
<div class="col-md-4">
Example 2</h3>
<div class="fd-fade2 fd-effect">
<img src="" class="fd-img2" alt="">
<!-- /. fd-fade -->
<!-- /.col-md-4 -->
<div class="col-md-4">
Example 3</h3>
<div class="fd-fade3 fd-effect">
<img src="" class="fd-img3" alt="">
<!-- /. fd-fade -->
<!-- /.col-md-4 -->
<script type="text/javascript">
$(document).ready(function () {
$('.fd-effect').hover(function () {
// add .stop() to prevent event chaining
}, function () {
}); // end .fd-effect
}); // end document.ready function


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.


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">
<album />

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

  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)

    .directive('fadeOut', {
        restrict: 'A',
        link: function(scope, el, attr) {
            $(el).hover(function () {
            }, function () {

and to use in markup:

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


— 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