javascript - angular.js 是否会导致另一个 jQuery 插件不触发并在控制台中不产生任何错误？

Question

因为时间是我无法安装的一个因素 MixItUp.js在我的项目“Angular 方式”中。 话虽这么说，我只是像入门页面状态上的文档一样将其连接起来；只是一个纯粹的 vanilla jQuery 安装。但是，唉，什么都没有。控制台中甚至没有错误。我想知道我做错了什么？

这是暂存 site. 的链接

下面是如何在我的 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>

2014 年 11 月 18 日更新

新的 HTML 标记

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

Answer 1

那是因为在 #container 上启动 MixItUp 的脚本在 ng-view 的内容有机会呈现之前运行，因此 id 为DOM 中尚不存在容器。

这是你别无选择的地方，只能从一开始就使用指令以“Angular 方式”做事，即

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