JQuery MixItUp with AngularJS NgRoute

Question

I managed to integrate jQuery MixItUp into my AngularJs application.

Elements to be displayed along with MixItUp are loaded from user services. After all the elements are extracted, I start creating jQuery MixItUp.

I also use AngularJS NgRoute to implement different pages.
When I first visit the page where jQuery MixItUp is used, everything is in order. But when I go to another page and return to the page using jQuery MixItUp, filters and sorting no longer work.

I configure my routes as follows:

myApp .config(function($routeProvider, $locationProvider) { $routeProvider // some routes for other pages .when('/', { templateUrl : '/assets/js/app/views/home.html', controller : 'MainController' }) .when('/about', { templateUrl : '/assets/js/app/views/about.html', controller : 'AboutController' }) // route for page where MixItUp is used .when('/media', { templateUrl : '/assets/js/app/views/media.html', controller : 'MediaController' }) // 404 .otherwise({ redirectTo : '/404' }) $locationProvider.html5Mode(true); }); 

In my custom directive I have init jQuery MixItUp with some parameters and sort fixes after init. console.log logs into the console every time I visit a page or revise a page. But when you re-examine the functionality of the filters and sorting are violated. The user directive is as follows:

 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' }, debug: { enable: true, mode: 'normal' } }); }); scope.$on('resort-mixitup', function(event, sortCommand) { console.log('[event] resort-mixitup'); angular.element(element).mixItUp('sort', sortCommand); }); } }; }); 

In my AngularJS controller (MediaController), I broadcast events as soon as all elements are received from user services:

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

The HTML view looks like this:

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

---

The chrome Javascript console prints the following to load the first page:

 [event] înit-mixitup [MixItUp][mixitup-container][_bindHandlers] 4 filter buttons found. [MixItUp][mixitup-container][_init] MixItUp instantiated on container with ID "mixitup-container". [MixItUp][mixitup-container][_init] There are currently 1 instances of MixItUp in the document. [event] resort-mixitup [MixItUp][mixitup-container][multiMix] Operation requested via the API. [MixItUp][mixitup-container][multiMix] An operation was requested but MixItUp was busy. The operation was added to the queue in position 1. [MixItUp][mixitup-container][multiMix] Loading operation from queue. There are 0 operations left in the queue. [MixItUp][mixitup-container][multiMix] Operation requested via the API. [MixItUp][mixitup-container][multiMix] Operation started. [MixItUp][mixitup-container][_cleanUp] Loading animation completed successfully. [MixItUp][mixitup-container][_cleanUp] The operation completed successfully. 

And to load the second page (after switching to other pages without restarting the browser):

 [event] înit-mixitup [event] resort-mixitup [MixItUp][mixitup-container][multiMix] Operation requested via the API. [MixItUp][mixitup-container][multiMix] Operation started. 

---

This raises another question related to this problem: How to initiate MixItUp using AngularJS NgRoute But there the elements are not dynamically loaded through user services.

Answer 1

I fixed the problem by calling the jQuery MixItUp destroy function when exiting the page.

I added another event listener to my directive for MixItUp:

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

And also added an event trigger in my AngularJS controller (MediaController):

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

Answer 2

How about this !!!

  'use strict'; angular.module('rjApp') .directive('mixitup',function($timeout,$compile){ var linker = function(scope,element,attr) { scope.$watch('entities', function(newVal, oldVal){ if (element.mixItUp('isLoaded')) { element.mixItUp('destroy'); element.mixItUp(); } else { element.mixItUp(); } },true); }; return { link: linker, scope:{entities:'='} } })