Integrating jQuery MixItUp in an angular.js project

Question

I'm trying to integrate jQuery MixItUp in an angular.js project. For this purpose i'm using the following custom directive.

app.directive('mixitup', function($compile) {
    return {
        restrict: 'A',
        scope: {
            entities: '='
        },
        link: function(scope, element, attrs) {
            scope.$watchCollection('entities', function() {
                angular.element(element).mixItUp({
                    animation: {
                        duration: 200
                    },
                    load: {
                        sort: 'date:desc'
                    },
                    debug: {
                        enable: true,
                        mode: 'verbose'
                    }
                });
            }, true);
        }
    };
});

The directive is used in HTML as following.

<div mixitup="mixitup" id="mixitup-container" entities="medias">
    <div ng-repeat="media in medias"
        data-date="{{ media.date }}"
        class="{{ itemClass }} {{ media.category }}">
        <div class="image">
            <img ng-src="{{ media.cover_image }}" class="img-responsive"></div>
    </div>
</div>

The medias collection is filled in a controller by fetching JSON data from custom services to connect the angular app to a Laravel 5.1 app. The success callback calls the following function. When logging the collection in the directive, it looks good.

$scope.addMedias = function addMedias(data) {
    for (var i=0; i<data.length; i++) {
        $scope.medias.push(data[i]);
    }
    $scope.loading = false;
};

The content is loaded as normal, but the MixItUp-Tiles stay hidden with display: none. When adding filters to the view, the tiles show up when filtering, but not at startup.
I also tried removing floats from Twitter Bootstrap 3 in CSS, because MixItUp is using display: inline-block.

#mixitup-container .mix {
    display: none;
    float: none;
}

Also the MixItUp debug script doesn't show any errors. But #mixitup-container gets class fail attached.

freakimkaefig freakimkaefig · Accepted Answer · 2015-11-11T12:08:53

I managed to integrate jQuery MixItUp into my AngularJs app.
The custom directive now looks like this:

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

    return {
        restrict: 'A',
        scope: {
            datasource: '=',
            add: '&',
        },
        link: function(scope, element, attrs) {

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

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

I used angular broadcast functionality to init MixItUp once all data is loaded. This is done by triggering the following:

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

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

The view HTML 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>

I also included the prefered css rule in my less:

#mixitup-container {
    .mix {
        display: none;
    }
}

One small problem remains. When i visit the page with MixItUp the first time, everything is okay, but the second time, the filters and sorting aren't working anymore. I'm using the angular $routeProvider to manage routing. There is another question relating this issue here: How to initiate MixItUp with AngularJS NgRoute

Integrating jQuery MixItUp in an angular.js project

1 Answers