AngularJs日常bug修复记录：使用第三方插件按需加载（oclazyload简单使用）

本文链接：https://blog.csdn.net/u011070165/article/details/73326621

新研发的项目中使用到了jqurey 的custom.js来实现一个下拉菜单的效果，原本插件是直接再页面上引用的,
如下：
<script src="/vendor/custom/js/custom.js" charset="utf-8"></script>

但是由于插件引用的时候，需要使用它的页面dom树还未生成，插件找不到它要使用的对象，使得插件失效。所以需要进行一个延迟加载，等待dom树生成再加载插件。

这时候需要引用一款angular 延迟加载的插件：oclazyload，它的使用非常简单，具体可以参见官网。

官网地址：https://oclazyload.readme.io/docs
页面引入oclazyload插件，并将它添加到angular的依赖中：

angular.module('app', ['ui.router','oc.lazyLoad']);

在需要引用custom.js插件的页面的指令中使用oclazyload加载custom.js，如下：

angular.module('app').directive('appMenu', ['$ocLazyLoad',function($ocLazyLoad){
  return {
    restrict: 'A',
    replace: true,
    templateUrl: 'view/template/menu.html',
    link:function(){
          $ocLazyLoad.load('/vendor/custom/js/custom.js');
   }
  };
}]);

这样页面就不需要在通过script标签来引入custom.js，就能实现在页面加载完成后实现一个下拉菜单的效果。