How to initiate MixItUp with AngularJS NgRoute

Question

I\'ve been setting up a jquery plugin MixItUp with AngularJS and although I can successfully initiate the container during one of my partial views with NgRoute, once I move

Answer 1

I spent several hours and finally the solution is here....

if ($('#grid').mixItUp('isLoaded')) {
          $('#grid').mixItUp('destroy');
          $('#grid').mixItUp();
      } else {
        $('#grid').mixItUp();
      }

Here's the full directive code..

'use strict';
 angular.module('rjApp')
.directive('mixitup',function($timeout,$compile){
  var linker = function(scope,element,attr) {

    scope.$watch('entities', function(newVal, oldVal){

      $timeout(function(){
        if ($('#grid').mixItUp('isLoaded')) {
            $('#grid').mixItUp('destroy');
            $('#grid').mixItUp();
        } else {
          $('#grid').mixItUp();
        }
      },10);
    },true);

  };
  return {
    link: linker,
    scope:{entities:'='}
  }
})

Answer 2

I'd recommend you to use directives when you are working with DOM. So you need to create some directive that will initiate MixItUp for you

angular.module('app').directive('myNgMixitup', [function(){
   return {
      restrict: 'AEC',
      link: function(scope, element){
         //now you can access the element/container
         element.mixItUp();
      }
   };
}])

Answer 3

I integrated jQuery MixItUp with AngularJS NgRoute with the use of a custom directive.

I use the AngularJS $broadcast and $on functions to handle communication between Controller and Directive:

myApp
.directive('mixitup', function($compile) {

    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

            scope.$on('init-mixitup', function(event) {
                // console.log('[event] înit-mixitup');
                angular.element(element).mixItUp({
                    animation: {
                        duration: 200
                    },
                    load: {
                        sort: 'myorder:desc'
                    }
                });
            });

            scope.$on('resort-mixitup', function(event, sortCommand) {
                // console.log('[event] resort-mixitup');
                angular.element(element).mixItUp('sort', sortCommand);
            });

            scope.$on('destroy-mixitup', function(event) {
                // console.log('[event] destroy-mixitup');
                angular.element(element).mixItUp('destroy');
            })
        }
    };
});

My view HTML:

<div class="btn-group controls">
    <button class="btn btn-lg filter"
        data-filter="all">All</button>
    <button class="btn btn-lg filter"
        data-filter=".photo">Photo</button>
    <button class="btn btn-lg filter"
        data-filter=".audio">Audio</button>
    <button class="btn btn-lg filter"
        data-filter=".video">Video</button>
</div>

<div mixItUp="mixItUp" id="mixitup-container">
    <div ng-repeat="item in items"
        id="{{ item.id }}"
        style="display: inline-block;"
        data-myorder="{{ item.date }}"
        class="mix col-xs-6 col-sm-4 {{ item.category }}">
            <img ng-src="{{ item.image }}" class="img-responsive img-circle">
    </div>
</div>

In my controller handle jQuery MixItUp with the following calls:

// instantiate jQuery MixItUp
$rootScope.$broadcast('init-mixitup');

// sort jQuery MixItUp
$rootScope.$broadcast('resort-mixitup', 'myorder:desc');

You have to destroy jQuery MixItUp when leaving page. I managed this by adding the following to my controller:

$scope.$on("$destroy", function(){
    $rootScope.$broadcast('destroy-mixitup');
});

You can also have a look at a very similar question i posted myself: jQuery MixItUp with AngularJS NgRoute

Answer 4

As @demkalkov suggest use a directive and load mix-it-up related html as template like

.directive('mixItUp', function(){
    return{
      restrict: 'AEC',
      templateUrl: 'mix-it-up-tpl.html',
      link: function(scope, element){             
         $(element).mixItUp();
      }
    }
  })

Use the directive in html as

<div mix-it-up></div>

And lets say your mix-it-up.html looks like

<div id="Container" class="container">
  <div class="mix category-1" data-myorder="1"></div>
  <div class="mix category-1" data-myorder="2"></div>
</div

Here is a working Demo

Note - In Angular context directive is the ideal place to manipulate html or plugin integration.