如何启动MixItUp与AngularJS NgRoute [英] How to initiate MixItUp with AngularJS NgRoute

问题描述

我已经建立一个jQuery插件MixItUp与AngularJS，虽然我与NgRoute局部视图中的一个过程，我可以成功启动容器，当我移动到其他页面浏览量和回似乎MixItUp不知道如何再次启动安装程序。

I've been setting up a jquery plugin MixItUp with AngularJS and although I can successfully initiate the container during one of my partial views with NgRoute, once I move to other page views and go back it seems that MixItUp does not know how to initiate setup again.

我试过$（文件）。就绪（），$（窗口）.load，甚至$ viewContentLoaded但似乎没有任何使其工作。整个容器根本不会被调用，当我点击我的其他页面，并再次返回。

I’ve tried $(document).ready(), $(window).load, and even $viewContentLoaded but nothing seems to make it work. The whole container simply does not get called when I click on my other pages and return again.

我的code如下。

$scope.$on('$viewContentLoaded', function(){  

    $('#container').mixItUp();    

    var $container = $('#ContainerP');

    if(!$container.mixItUp('isLoaded')){
      $container.mixItUp();
    } 
  alert("It's loading!");
});

在功能一切顺利通行证包括警报消息，但不知何故mixItUp不能我的看法路由中调用...将AP preciate很大，如果有人可以帮助我在这里！谢谢！

Everything in the function passes smoothly including the alert message, but somehow mixItUp cannot be called within my routing views…would appreciate greatly if someone could help me out here! Thanks!

推荐答案

我jQuery的整合与MixItUp AngularJS NgRoute与使用自定义的指令。

I integrated jQuery MixItUp with AngularJS NgRoute with the use of a custom directive.

我用的是AngularJS $广播和 $关于函数来处理控制器和指令之间的通信：

I use the AngularJS $broadcast and $on functions to handle communication between Controller and Directive:

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

我的观点HTML：

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

在我的控制器手柄的jQuery MixItUp与以下呼叫：

In my controller handle jQuery MixItUp with the following calls:

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

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

您已经离开页面时摧毁的jQuery MixItUp。

You have to destroy jQuery MixItUp when leaving page. I managed this by adding the following to my controller:

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

您也可以看看一个非常类似的问题，我自己贴： jQuery的MixItUp与AngularJS NgRoute

You can also have a look at a very similar question i posted myself: jQuery MixItUp with AngularJS NgRoute

这篇关于如何启动MixItUp与AngularJS NgRoute的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！