AngularJs日常bug修复记录: 使用第三方插件按需加载(oclazyload简单使用)

  新研发的项目中使用到了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,就能实现在页面加载完成后实现一个下拉菜单的效果。

猜你喜欢

转载自blog.csdn.net/u011070165/article/details/73326621
今日推荐