jquery - 如何使用 AngularJS NgRoute 启动 MixItUp

Question

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

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中的指令作为

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