jQuery的MixItUp与AngularJS NgRoute

问题描述

我设法jQuery的MixItUp融入我AngularJs应用程序。

I managed to integrate jQuery MixItUp into my AngularJs app.

这应该MixItUp显示的项目从定制服务加载。一旦所有项目都牵强，我触发jQuery的MixItUp的实例。

The items that should be displayed with MixItUp are loaded from custom services. Once all items are fetched, i trigger instantiation of jQuery MixItUp.

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

I'm also using AngularJS NgRoute to implement different pages.
When i first visit the page where jQuery MixItUp is used everything is fine. But when i then go to another page and back to the page with jQuery MixItUp, the filters and sorting aren't working anymore.

设置我的路线是这样的：

I setup my routes like this:

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一些选项和解决初始化后排序。在的console.log 正在登录到控制台每次我查看或访问该网页。但在重温过滤器的功能和排序都断了。
自定义指令如下：

In my custom directive i init jQuery MixItUp with some options and fix sorting after init. The console.log are logging to console everytime i visit or revisit the page. But on revisit the functionality of filters and sorting are broken.The custom directive looks like this:

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）我播放的事件，一旦所有项目都从获取定制服务：

In my AngularJS Controller (MediaController) i broadcast the events once all items are fetched from custom services:

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

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

该视图的HTML如下：

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>

---

在Chrome的JavaScript控制台输出的第一页加载以下内容：

---

The Javascript console in chrome outputs the following on first page load:

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

和上第二个页面加载（移动到其他页面，不浏览器重装后）：

And on second page load (after moving to other pages, without browser reload):

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

---

这里有关于这个问题的另外一个问题：How启动MixItUp与AngularJS NgRoute
但目前还没有通过定制服务动态加载的项目。

---

There is another question relating this issue here: How to initiate MixItUp with AngularJS NgRouteBut there the items aren't loaded dynamically via custom services.

推荐答案

怎么了！

    '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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！