如何使用 AngularJS NgRoute 启动 MixItUp答案

【问题标题】：How to initiate MixItUp with AngularJS NgRoute如何使用 AngularJS NgRoute 启动 MixItUp
【发布时间】：2014-11-30 19:49:53
【问题描述】：

我一直在使用 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……如果有人能在这里帮助我，将不胜感激！谢谢！

【问题讨论】：

您是否尝试使用 $scope.$apply() 命令重新运行摘要？
没关系，我已经将同位素用于我的排序和过滤网格逻辑，它与我的 Angular 路由完美配合。 mixItUp 似乎依赖于从基本路由触发的 DOM 更新，因此我无法在部分视图中再次重新触发它。还是谢谢~

标签： jquery angularjs ngroute

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

正如@demkalkov 建议使用指令并将mix-it-up 相关html 作为模板加载

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

将directive 中的html 用作

<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

这是一个有效的Demo

注意 - 在 Angular 上下文指令中是操作 html 或插件集成的理想场所。

【讨论】：

【解决方案3】：

我使用自定义指令将 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

【讨论】：

【解决方案4】：

我花了几个小时终于解决了....

if ($('#grid').mixItUp('isLoaded')) {
          $('#grid').mixItUp('destroy');
          $('#grid').mixItUp();
      } else {
        $('#grid').mixItUp();
      }

这是完整的指令代码..

'use strict';
 angular.module('rjApp')
.directive('mixitup',function($timeout,$compile){
  var linker = function(scope,element,attr) {

    scope.$watch('entities', function(newVal, oldVal){

      $timeout(function(){
        if ($('#grid').mixItUp('isLoaded')) {
            $('#grid').mixItUp('destroy');
            $('#grid').mixItUp();
        } else {
          $('#grid').mixItUp();
        }
      },10);
    },true);

  };
  return {
    link: linker,
    scope:{entities:'='}
  }
})

【讨论】：