可能angular.js导致另一个jQuery插件不火，并在控制台中产生任何错误？ [英] Could angular.js cause another jQuery plugin not to fire and produce no errors in the console?

问题描述

由于时间我将无法安装 MixItUp.js <因素/ A>在我的项目角办法。
话虽这么说，我只是挂钩起来就像在入门页面状态的文件;只是一个纯粹的香草jQuery的安装。但是，唉，什么都没有。甚至在控制台错误。我想知道我能是做错了？

下面是分期网站的链接。

和下面是怎样的剧本被标记的在我的HTML。

 ＆LT;脚本SRC =HTTP：//$c$c.jquery.com/jquery-1.11.0.min.js＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =htt​​p://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js＆GT;＆下; /脚本＆GT;
＆LT;脚本＆GT;
变量$ J = jQuery.noConflict（）;附加$ J（函数（）{
    附加$ J（'＃集装箱'）mixItUp（）。}）;
＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / app.js＆GT;＆LT; / SCRIPT＆GT;
 

更新2014年11月18日

新的HTML标记

 ＆LT; D​​IV混合它向上ID =容器类=容器＆GT;
    ＆所述;股利类=混合类-1数据myorder =1＆GT;＆下; / DIV＆GT;
    ＆LT; D​​IV CLASS =混合类-1数据myorder =2＆GT;＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =混合类-1数据myorder =3＆GT;＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =混合类-2的数据myorder =4＆GT;＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =混合类-1数据myorder =5＆GT;＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =混合类-1数据myorder =6＆GT;＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =混合类-2的数据myorder =7＆GT;＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =混合类-2的数据myorder =8＆GT;＆LT; / DIV＆GT;    ＆LT; D​​IV CLASS =差距＆GT;＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =差距＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

这是因为你的脚本来启动MixItUp在 #container的你的<$ C $的内容之前运行C> NG-视图有机会来呈现，所以用容器的标识元素不会在DOM存在。

这是你别无选择，只能做的事情的角路从一开始去的指令，即

HTML

 ＆LT; D​​IV混合它向上ID =容器类=容器＆GT;＆LT; / DIV＆GT;
 

JS

  .directive（'mixItUp'，函数（）{
  var命令= {
    限制：'A'，
    链接：链接
  };  返回指令;  功能链接（范围，元素，ATTRS）{
    $（元件）.mixItUp（）;
  }
}）;
 

Because time is a factor I won’t be able to install MixItUp.js in my project “the angular way.” That being said, I am just hooking it up like the documentation on the getting started page states; Just a pure vanilla jQuery installation. But alas, nothing. Not even an error in the console. I am wondering what can I be doing wrong?

Here is a link to the staging site.

And below is how the scripts are being marked-up in my HTML.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
<script>
var $j = jQuery.noConflict();

$j(function() {
    $j('#Container').mixItUp();

});
</script>
<script src="js/app.js"></script>

UPDATE 11.18.2014

NEW HTML MARKUP

<div mix-it-up id="Container" class="container">
    <div class="mix category-1" data-myorder="1"></div>
    <div class="mix category-1" data-myorder="2"></div>
    <div class="mix category-1" data-myorder="3"></div>
    <div class="mix category-2" data-myorder="4"></div>
    <div class="mix category-1" data-myorder="5"></div>
    <div class="mix category-1" data-myorder="6"></div>
    <div class="mix category-2" data-myorder="7"></div>
    <div class="mix category-2" data-myorder="8"></div>

    <div class="gap"></div>
    <div class="gap"></div>
</div>

解决方案

That's because your script to initiate MixItUp on #container runs before the contents of your ng-view has had a chance to render, so an element with an id of container does not yet exist in the DOM.

This is where you have little choice but to do things "the Angular way" from the get go with directives, i.e.

HTML

<div mix-it-up id="Container" class="container"></div>

JS

.directive('mixItUp', function () {
  var directive = {
    restrict: 'A',
    link: link
  };

  return directive;

  function link (scope, element, attrs) {
    $(element).mixItUp();
  }
});

这篇关于可能angular.js导致另一个jQuery插件不火，并在控制台中产生任何错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！