Question

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

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

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

我设置了这样的路线：

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

在我的自定义指令中，我使用一些选项初始化jQuery MixItUp并在init之后修复排序。每次访问或重新访问页面时，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.

此问题还有另一个问题：How to initiate MixItUp with AngularJS NgRoute 但是这些项目不是通过自定义服务动态加载的。

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

jQuery MixItUp与AngularJS NgRoute

2 个答案: