jQuery与AngularJS NgRoute的混合

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

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

我还使用AngularJS NgRoute来实现不同的页面。
当我第一次访问使用jquerymixitup的页面时，一切都很好。但是，当我转到另一个页面并使用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);
});

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

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

在我的自定义指令中，我使用一些选项初始化jQuery MixItUp，并修复初始化后的排序。每次我访问或重新访问页面时，

console.log

都会登录到控制台。但在重新访问时，过滤器和排序的功能被破坏。 自定义指令如下所示：

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

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

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

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

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

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

视图HTML如下所示：

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

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

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

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

---

这里还有一个与此相关的问题：

---

但是这些项目并不是通过定制服务动态加载的。

我在离开页面时调用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）中添加了事件触发器：

怎么样

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