如何使用AngularJS NgRoute启动MixItUp

Question

我一直在用AngularJS设置一个jquery插件MixItUp，虽然我可以在使用NgRoute的一次局部视图中成功地启动容器，但一旦我移动到其他页面视图并返回，MixItUp似乎不知道如何再次启动设置。

我尝试过$(document).ready()，$(window).load，甚至$viewContentLoaded，但似乎都不能正常工作。当我单击其他页面并再次返回时，整个容器根本不会被调用。

我的代码如下。

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

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

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

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

函数中的所有内容都顺利通过，包括警报消息，但不知何故无法在我的路由视图…中调用mixItUp如果有人能帮我一下，我将不胜感激！谢谢!

Answer 1

正如@demkalkov建议的那样，使用指令并加载mix-it-up相关的html作为模板，如下所示

.directive('mixItUp', function(){
    return{
      restrict: 'AEC',
      templateUrl: 'mix-it-up-tpl.html',
      link: function(scope, element){             
         $(element).mixItUp();
      }
    }
  })

将html中的directive用作

<div mix-it-up></div>

假设你的mix-it-up.html看起来像

<div id="Container" class="container">
  <div class="mix category-1" data-myorder="1"></div>
  <div class="mix category-1" data-myorder="2"></div>
</div

下面是一个有效的

注释- In Angular上下文指令是操作html或插件集成的理想位置。

Answer 2

我使用自定义指令将jQuery MixItUp与AngularJS NgRoute集成在一起。

我使用AngularJS $broadcast和$on函数来处理控制器和指令之间的通信：

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：

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

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

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

离开页面时，您必须销毁jQuery MixItUp。我通过将以下内容添加到我的控制器来实现这一点：

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

您还可以查看我自己发布的一个非常类似的问题：jQuery MixItUp with AngularJS NgRoute

Answer 3

我建议您在使用DOM时使用指令。因此您需要创建一些指令来为您启动MixItUp

angular.module('app').directive('myNgMixitup', [function(){
   return {
      restrict: 'AEC',
      link: function(scope, element){
         //now you can access the element/container
         element.mixItUp();
      }
   };
}])