Question

我有一个非常简单的节点/角度应用程序。我遇到的问题是让我的jQuery在我的指令中工作。我创建了一个指令，在其链接函数中使用了相当多的jQuery。当网站首次加载到浏览器中时，指令工作正常。但是，当我转到另一个部分，然后单击浏览器后退按钮时，指令中的jQuery不再有效。该指令正在正确触发，因为我已使用alerts和console.log语句对此进行了测试。我甚至测试了常规的javascript，它在我转到另一个部分然后再回到第一个部分之后工作。我不确定为什么jQuery不能在这个实例中工作，但我真的需要帮助解决这个问题。 jQuery文件与其他脚本和样式表一起加载到index.html文件中。

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

局部/ 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>

指令：

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

Answer 1

我正在阅读的所有内容都说“忘记jQuery存在＆＃34;当你搬到Angular。你可以在不调用jQuery的情况下完成大部分的尝试吗？

Answer 2

问题是你需要在做角度之前注入jquery。只需将jquery脚本移到顶部，然后Angular将知道如何使用它

Angular Directive中的JQuery无法正常工作

2 个答案: