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

使用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或插件集成的理想位置。

Answer 2

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

我使用AngularJS $broadcast和$on函数来处理Controller和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：

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

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

如何使用AngularJS NgRoute启动MixItUp

4 个答案: