1

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

Error from adding new directive

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>
Antonio Pavicevac-Ortiz
  • 7,239
  • 17
  • 68
  • 141

1 Answers1

4

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();
  }
});
user2943490
  • 6,900
  • 2
  • 22
  • 38
  • Thanks so much however now I am getting a `undefined is not a function` error? And just double checking is my markup correct? (See update above). – Antonio Pavicevac-Ortiz Nov 18 '14 at 16:36
  • 1
    put a breakpoint within the link function, you'll notice that `$` (the usual alias for jQuery) is undefined in this context. You'll need to use your `noConflict` reference to jQuery rather than `$`. – user2943490 Nov 18 '14 at 22:33
  • Awesome, that worked! However, when I jump off the page and come back the plugin stops firing...But when you do a refresh it fires and works perfectly! Is there something I'am missing? – Antonio Pavicevac-Ortiz Nov 19 '14 at 01:32
  • 1
    MixItUp keeps an internal register of its instances, so this prevents it from being initialised on a matching element again. As with most jQuery plugins, you need to [do some clean up](https://mixitup.kunkalabs.com/docs/#method-destroy) in the directive. In the link function, add `element.on('$destroy', function () { element.mixItUp('destroy'); });`. This basically says, when the element is `$destroy`ed (removed from the view), remove this instance from MixItUp's register. – user2943490 Nov 19 '14 at 03:39
  • Thanks so much, that worked. Do you know a good resource to learn how to use angular & jQuery in these kind of situations? – Antonio Pavicevac-Ortiz Nov 19 '14 at 14:18
  • In general, any plugin initialisation code you used to do in a `$(document).ready` or similar should now be done in the `link` function. I've never experienced a case where using the plugin in its raw form was any easier to manage than wrapping the plugin in a directive. related: http://stackoverflow.com/a/16935288/2943490 – user2943490 Nov 19 '14 at 22:16