如何使用 AngularJS NgRoute 启动 MixItUp

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

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

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

Use the directive in html as

<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

Note- 在 Angular 上下文指令中，是操作 html 或插件集成的理想位置。