在 angular.js 项目中集成 jQuery MixItUp答案

【问题标题】：Integrating jQuery MixItUp in an angular.js project在 angular.js 项目中集成 jQuery MixItUp
【发布时间】：2015-10-22 20:25:58
【问题描述】：

我正在尝试将 jQuery MixItUp 集成到 angular.js 项目中。为此，我使用以下自定义指令。

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

该指令在 HTML 中使用如下。

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

medias 集合通过从自定义服务获取 JSON 数据填充到控制器中，以将 Angular 应用程序连接到 Laravel 5.1 应用程序。成功回调调用以下函数。在指令中记录集合时，它看起来不错。

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

内容正常加载，但 MixItUp-Tiles 使用display: none 保持隐藏状态。将过滤器添加到视图时，图块会在过滤时显示，但不会在启动时显示。
我还尝试在 CSS 中从 Twitter Bootstrap 3 中删除浮动，因为 MixItUp 使用的是display: inline-block。

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

此外，MixItUp 调试脚本不会显示任何错误。但是#mixitup-container 附加了fail 类。

【问题讨论】：

标签： jquery angularjs twitter-bootstrap-3 mixitup

【解决方案1】：

我设法将 jQuery MixItUp 集成到我的 AngularJs 应用程序中。
自定义指令现在看起来像这样：

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

加载所有数据后，我使用角度广播功能来初始化 MixItUp。这是通过触发以下来完成的：

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

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

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

我还在我的 less 中包含了首选的 css 规则：

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

还有一个小问题。当我第一次使用 MixItUp 访问该页面时，一切正常，但第二次，过滤器和排序不再起作用。我正在使用角度 $routeProvider 来管理路由。这里还有一个与此问题相关的问题：How to initiate MixItUp with AngularJS NgRoute

【讨论】：