jQuery MixItUp with AngularJS NgRoute

Question

我设法将jQuery MixItUp集成到我的AngularJs应用程序中。

应该使用MixItUp显示的项目是从自定义服务加载的。一旦提取了所有项目，我就会触发jQueryMixItUp的实例化。

我还使用AngularJS NgRoute来实现不同的页面
当我第一次访问使用jQuery MixItUp的页面时，一切都很好。但是当我转到另一个页面并使用jQueryMixItUp返回页面时，过滤器和排序就不再工作了。

我这样设置我的路线：

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

在我的自定义指令中，我用一些选项初始化jQueryMixItUp，并修复了初始化后的排序。每次我访问或重新访问页面时，console.log都会登录到控制台。但在重新访问时，过滤器和排序的功能被破坏了。自定义指令如下所示：

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

在我的AngularJS控制器（MediaController）中，一旦从自定义服务中提取所有项目，我就会广播事件：

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

---

chrome中的Javascript控制台在第一页加载时输出以下内容：

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

在第二页加载时（移动到其他页面后，无需重新加载浏览器）：

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

---

这里还有另一个与此相关的问题：如何使用AngularJS NgRoute启动MixItUp但是这些项目并不是通过自定义服务动态加载的。

Answer 1

我在离开页面时通过调用jQuery MixItUp destroy函数解决了这个问题。

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

并在我的AngularJS控制器（MediaController）中添加了事件触发器：

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

Answer 2

怎么样！！！

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