JQuery in Angular Directive not wroking

Question

I have an node/angular app which is pretty simple. The problem i'm having is getting my jQuery to work inside my directive. I created a directive that uses quite a bit of jQuery inside its link function. When the website is first loaded in the browser the directive works perfectly. However when I go to another partial and then click the browsers back button the jQuery in the directive no longer works. The directive is firing properly as I've tested this out with alerts and console.log statements. I've even tested regular javascript and it works after I go to another partial and then come back to the first partial. I'm not sure why the jQuery isn't working in this instance but I really need help figuring this out. The jQuery file is loaded in the index.html file along with the other scripts and stylesheets.

Index.html:

<html lang="en" ng-app="myApp">
<head>
<base href='/'>
<title>MobiMall</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="/css/app.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body style="background-color: transparent; margin: 0">
    <ng-view></ng-view>

<script src="js/bower_components/angular/angular.js"></script>
<script src="js/bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>

partial/index.html

<div id="phone-wrap" swipe-clothes>
  <div id="mobi-phone" class="col-sm-6">
    <div id="mobi-phone-container">
        <div id="mobi-phone-window">
            <div id="mobi-cards-top">
            <ul id="mobi-cards-header" class="list-unstyled">

            </ul>       
        </div>
        <div id="mobi-cards" class="list-unstyled">
            <ul id="mobi-cards-swipe" class="list-unstyled" style="display: block">

            </ul>
        </div>

        <div id="mobi-cards-bottom">
            <a id="mobi-cards-hanger"></a>
            <a id="mobi-cards-star"></a>
            <a id="mobi-cards-bag"></a>
        </div>
    </div>
</div>

Directive:

angular.module('myApp.directives', []).
directive('swipeClothes', function($rootScope) {
var Person = {
  wrap: $('#mobi-cards-swipe'),
  topWrap: $('#mobi-cards-header'),
  clothing: [ 
    {img: "/images/clothingImage1.png",
             name:"Brian",
             image:"/images/profilepic1.png"
            },
    {img: "/images/clothingImage2.png",
             name:"Brian",
             image:"/images/profilepic1.png"
            },
    {img: "/images/clothingImage3.png",
             name:"Jennifer",
             image:"/images/profilepic2.png"
            },
],
  add: function(index){
    var random = this.clothing[index];//this.clothing[Math.floor(Math.random() * this.clothing.length)];
    this.topWrap.append("<li style='-webkit-transition: all .3s linear; transition: all .3s linear;'><figure><img src='"+ random.image +"'/></figure><p>"+ random.name +"</p></li>"),
    this.wrap.append("<li style='-webkit-transition: all .8s ease-out; transition: all .8s ease-out;' id='mobi-card'><div id='mobi-card-overlay'></div><figure><img src='"+ random.img +"'/></figure></li>");
  },

  addFront: function(index){
    var random = this.clothing[index];//this.clothing[Math.floor(Math.random() * this.clothing.length)];
    this.topWrap.prepend("<li style='-webkit-transition: all .3s linear; transition: all .3s linear;'><figure><img src='"+ random.image +"'/></figure><p>"+ random.name +"</p></li>"),
    this.wrap.prepend("<li style='-webkit-transition: all .8s ease-out; transition: all .8s ease-out;' id='mobi-card'><div id='mobi-card-overlay'></div><figure><img src='"+ random.img +"'/></figure></li>");
  }
};

var index = 0,
    animationEndEvent = "webkitTransitionEnd mozTransitionEnd MSTransitionEnd otransitionend transitionend",
    choose = true;

function add(){

  var list = $('#mobi-cards-swipe li'),
          length = list.length,
          header = $('#mobi-cards-header li'),
          headerLength = header.length;

  if (length > 3) {
    list.eq(0).remove();
  }
  if (headerLength > 3) {
   header.eq(0).remove();
  }
  if (index > 2) {
    index = 0;
  }
  Person.addFront(index);
  animateMobi();
}

function animateMobi(){

  setTimeout(function(){
    var list = $('#mobi-cards-swipe li'),
        overlay = $('#mobi-cards ul #mobi-card #mobi-card-overlay'),
        header = $('#mobi-cards-header li');
    if (choose) {
      overlay.last().addClass("overlay-yes");
      header.last().addClass("opacity-change");
      list.last().addClass("swiping-yes").one(animationEndEvent, function(){
        choose = false;
        list.last().remove();
        header.last().remove();
        index++;
      });
    }
    else{
      overlay.last().addClass("overlay-nope");
      header.last().addClass("opacity-change");
       list.last().addClass("swiping-nope").one(animationEndEvent, function(){
        choose = true;
        list.last().remove();
        header.last().remove();
        index++
      });
    }
    add();
  },1500);
}

var swipe = function(scope, element, attrs){
    Person.add(2);
    Person.add(1);
    Person.add(0);

   setTimeout(function(){
      animateMobi();
   }, 0);
};
return{
  restrict: 'EA',
  link: swipe,
};
});

Randal Schwartz · Accepted Answer · 2015-03-11 04:32:08Z

1

Everything I'm reading says "forget jQuery exists" when you move to Angular. Could you do most of what you're trying without invoking jQuery?

answered Mar 11, 2015 at 4:32

Randal Schwartz

44.8k4 gold badges51 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

brian Scroggins Over a year ago

I could replace the code with regular javascript but i'm looking for a more simple solution. I was wondering if anyone else has solved this before

Jony-Y Over a year ago

I know a lot of developers using angular are against JQuery, personally I dont have the slightest idea why. I naturally do things the angular way but having that script and using it from time to type to do things that jqlite doesnt provide and javascript is too complex I think its makes sense.

Jony-Y · Accepted Answer · 2015-03-11 05:46:22Z

0

the problem is that you need to inject the jquery before you do angular. just move the jquery script to the top, then Angular will know to work with it

answered Mar 11, 2015 at 5:46

Jony-Y

1,5791 gold badge13 silver badges31 bronze badges

Collectives™ on Stack Overflow

JQuery in Angular Directive not wroking

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related