javascript - 从文件引用时,ng-view 内的脚本不起作用(JQuery 在 Angular 之前加载)

标签 javascript jquery html angularjs angular-routing

我正在使用 Angular 和 Angular 路线。 index.html 看起来像这样:

<!DOCTYPE html>
<html lang="en" ng-app="Showcase">
<head>
    <meta charset="UTF-8">
    <title>UCSD Showcase</title>
    <base href="/showcase/">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
    <script src="routes.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="js/initGlobalHelpers.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="#########################################">
    <meta name="keywords" content="###############################################">
    <meta property="og:url" content="#">
    <meta property="og:site_name" content="CSES OSS">
    <meta property="og:image" content="############################################################################################">
    <meta property="og:description" content="#">
    <meta property="og:type" content="website">
    <meta name="twitter:site_name" content="CSS OSS">
    <meta name="twitter:site" content="################">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:description" content="#">
    <meta name="twitter:image" content="#">
    <meta name="image" content="#">
    <link rel="stylesheet" media="all" href="./styles/style.css">
</head>
<body>
<ng-view></ng-view>
</body>
</html>

然后是我使用时的主页

<h1>This is the home page</h1>
<script src="home.html"></script>

我收到警告

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. jquery.min.js:4

和一个错误

SyntaxError: Unexpected token < angular.js:13550

但是,当我用脚本的内容替换该脚本时,基本上最终看起来像这样:

<h1>This is the home page</h1>
<script>
    console.log('Hi!');
</script>

然后就可以了。

为什么会发生这种情况以及如何解决它?

最佳答案

使用 ngIninclude 代替 html 脚本标签

<div ng-include="'home.html'"></div>

请参阅 ngIninclude 文档 here

关于javascript - 从文件引用时,ng-view 内的脚本不起作用(JQuery 在 Angular 之前加载),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36787020/

相关文章:

javascript - BootStrap 进度条上显示不到 1%

javascript - 跟踪 Knockout.js 订阅者

jquery - Drop() 被 Sortable/Droppable 调用两次

javascript - 之前在 Javascript 中未定义

javascript - 用 Javascript 编写的可编辑表格

jquery - 调整图像大小但保持其比例——是否可以通过 HTML、CSS 或 jQuery 实现?

javascript - 如何垂直制作D3 Streamgraph

php - 页面加载时未出现对话框

html - 如何扩大特定顶级菜单项的子菜单项区域?

javascript - 用于元标签和标题标签的 Jinja 模板?