angular.js 会导致另一个 jQuery 插件不触发并且在控制台中不产生错误吗？

Question

因为时间是一个因素，我无法在我的项目中“以角度方式”安装 MixItUp.js。 话虽如此，我只是像入门页面状态上的文档一样将其连接起来；只是一个纯粹的 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 的内容有机会呈现之前运行，因此 DOM 中尚不存在 ID 为 container 的元素。

这是你别无选择的地方，只能从一开始就使用指令“以 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();
  }
});