Question

我正在加载角度库并检查脚本中是否已包含该库。

<body>
    <div ng-app="myApp">
        {{1+1}}
    </div>

<script type="text/javascript">
    var angular;
    // load angular library if undefined
    if (typeof window.angular === 'undefined') {

        var script_tag = document.createElement('script');
        script_tag.type = 'text/javascript'; 
        script_tag.src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js";

        document.body.appendChild(script_tag);
        console.log(script_tag, 'angular load');

    } else {
        console.log('script found');
    }

</script>
//load angular script
<script type="text/javascript" src="widget-angular.js"></script>
</body>

在widget-angular.js中：

var myApp = angular.module( 'myApp', []);

我得到的错误：

未捕获的TypeError：无法调用未定义的方法'module'

首先我认为错误的原因是因为在小部件脚本之后加载了角度库。但我已经做了各种检查，并且它按顺序加载。我不知道它为什么不识别'模块'。如果我像这样直接调用库：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>

有效。但我需要的结果是它检查库是否已经包含在内。如果没有，请包括库脚本。

谢谢你提前。

Answer 1

您要附加到body，这会将其放在您的其他脚本标记之后。因此，在您尝试访问angular之前，不会对其进行编译。

可以使用document.write()或document.head.appendChild(script_tag)。

通过检查浏览器控制台/开发人员工具中的实时html来验证这一点很容易

使用Javascript包含AngularJS库时出错

1 个答案: