关于angularjs 的路由使用中,JS脚本必须迟于NGVIE内容加载的问题解决方法

1、angularjs的路由,不管是内置还是UI-ROUTER在使用的时候都有个讨厌的问题,有些JS文件必须最后加载,但页面读取过程是不会等待路由容器加载路由页面完成后再加载外部JS文件的。

2、而如果将JS文件加载到路由页面中,发现根本不能加载,原因据说是因为路由模板读取的模式问题,

3、最吐血的是就算你通过延时之类的方法中确保首次打开页面,JS文件最后加载,但再路由切换过程中,页面并不刷新,所以模板文件又跑到JS文件后面去了,于是通过监控路由切换刷新页面,发现这不但失去了路由的意义,而且也不能保证每次刷新读取顺序正确。

4、在网上找了很多方法,借助第三方插件还是很难保证JS文件一点迟于模板加载完成,而且也不能保证多个JS文件的先后顺序。

折腾了半天,用了一个很笨的办法。

首先对路由切换进行监听,发生变化时再加载JS文件,但这样会在切换中,加载多个相同的JS文件,所以必须先删除前一个加载的然后重新加载代码如下:

$scope.$on('$destroy', function() { 
        $('#amjs').remove();
        $('#appjs').remove();

        $(document.body).append('<script id="amjs" src="assets/js/amazeui.js"><\/script>');
        $(document.body).append('<script id="appjs" src="assets/js/app.js"><\/script>');

    })

测试发现效果不错,但同时又出现了一个问题,如果用户不小心刷新了页面,JS文件将不被加载,于是又加入监听页面刷新的方法

$scope.$watch('$viewContentLoaded', function() {
   
        $('#amjs').remove();

        $('#appjs').remove();

    $(document.body).append('<script id="amjs" src="assets/js/amazeui.js"><\/script>');
        $(document.body).append('<script id="appjs" src="assets/js/app.js"><\/script>');
    });

用了下反正是能实现我自己的要求了,作为一个菜鸟,只能用这个笨方法了。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值