关于angular的include指令,include的页面无法加载js问题解决

在学习Angular时遇到include指令加载b.html页面时,其中的c.js文件未被正确执行。经过查找资料,发现在index.html、b.html和news_app.js中,存在Angular的特定机制导致此问题。解决方法是在news_app.js中添加相应代码来确保JS文件的正确加载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

晚上在看angular时候,遇到了一个问题

问题描述:

index.html

<!DOCTYPE html>
<html ng-app='a'>
<head></head>
<body ng-controller='first'>
<div>hello</div>
<div ng-include=b.html></div>
<script type="text/JavaScript" src='https://code.angularjs.org/1.5.10/angular.min.js'></script>

<script type="text/JavaScript" src="/public/javascripts/news_app.js"></script>
</body>
</html>


b.html

<!DOCTYPE html>
<html ng-app='a'>
<head></head>
<body ng-controller='first'>
<div>hahaha</div>
<script style='text/javascript' src='c.js'></script>
<script type="text/JavaScript" src='https://code.angularjs.org/1.5.10/angular.min.js'></script>

<script type="text/JavaScript" src="/public/javascripts/news_app.js"></script>

</body>
</html>


news_app.js

var NewsPub=angular.module('a',[]);
NewsPub.controller('first',['$scope','$http','$window',function($scope,$http,$window){
  });

你会发现,c.js根本没有被调用!!!!!

我以为自己哪里因为粗心写错了变量,然后找了好半天自己变量问题,郁闷。。。。

后来我就各种百度,哈哈哈,原来这是angular的某种机制,最终发现有个人在stack上找到了解决方法,现在归纳使用如下:

在news_app.js加入如下代码

news_app.js

(function (ng) {
    'use strict';
var app = ng.module('ngLoadScript', []);
app.directive('script', function() {
    return {
        restrict: 'E',
        scope: false,
        link: function(scope, elem, attr)
        {
            if (attr.type==='text/javascript-lazy')
            {
                var s = document.createElement("script");
                s.type = "text/javascript";
                var src = elem.attr('src');
                if(src!==undefined)
                {
                    s.src = src;
                }
                else
                {
                    var code = elem.text();
                    s.text = code;
                }
                document.head.appendChild(s);
                elem.remove();
            }
        }
    };
});
}(angular));

var NewsPub=angular.module('a',['
ngLoadScript
']);NewsPub.controller('first',['$scope','$http','$window',function($scope,$http,$window){  });


问题解决~~~~~~~~~


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值