How to initiate MixItUp using AngularJS NgRoute

Question

I set up the MixItUp jQuery plugin with AngularJS, and although I can successfully launch the container during one of my partial views using NgRoute, as soon as I go to the other pages and return, it seems that MixItUp does not know how to start the setup again.

I tried $ (document) .ready (), $ (window) .load and even $ viewContentLoaded, but nothing works. The whole container just doesn't get called when I click on other pages and return again.

My code is as below.

$scope.$on('$viewContentLoaded', function(){ $('#container').mixItUp(); var $container = $('#ContainerP'); if(!$container.mixItUp('isLoaded')){ $container.mixItUp(); } alert("It loading!"); }); 

Everything in the function runs smoothly, including a warning message, but somehow mixItUp cannot be called in my routing views ... I would really appreciate it if someone could help me here! Thanks!

Answer 1

Since @demkalkov suggests using the directive and loading the mix-it-up related html as a template, for example

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

Use directive in html like

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

And let's 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, the contextual directive is the ideal place to control the integration of html or plugins.

Answer 2

I enabled jQuery MixItUp using AngularJS NgRoute using a custom directive.

I use the AngularJS $broadcast and $on functions to handle the communication between the controller and the 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 HTML view:

 <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, the jQuery MixItUp handler with the following calls:

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

You need to destroy jQuery MixItUp when you exit the page. I did this by adding the following to my controller:

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

You can also take a look at a very similar question that I posted myself: jQuery MixItUp with AngularJS NgRoute

Answer 3

I would recommend that you use directives when you work with the DOM. Therefore, you need to create some directive that will trigger 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 4

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

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

Here is 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:'='} } })