jquery - 如何使用AngularJS NgRoute初始化MixItUp

我一直在用AngularJS设置一个jQuery插件MixItUp，尽管我可以在使用NgRoute的部分 View 中成功启动容器，但是一旦移至其他页面 View 并返回，似乎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!");
});

该函数中的所有内容(包括警报消息)都可以顺利通过，但是以某种方式无法在我的路由 View 中调用mixItUp…如果有人可以在这里帮助我，将不胜感激!谢谢!

最佳答案

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