Can angular.js cause another jQuery plugin to start and not generate errors in the console?
Since time is a factor, I will not be able to install MixItUp.js in my "angular path" project. That being said, I just hook it up as documentation for the start states; Just a clean jQuery install for vanilla. But alas, nothing. Even a bug in the console. I am wondering what could I be doing wrong?
Here is the link to the site.
And below shows how scripts are tagged 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 MARKER
<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>
source to share
This is because your script to run MixItUp is not being #container
executed before your content ng-view
is rendered, so the element with the container id doesn't exist in the DOM yet.
Here you have little choice but to do the "Angular way" 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();
}
});
source to share