angularjs - ng-include 不做任何事情
问题描述
我正在尝试使用 ng-include 在我的软件网页上包含一些 HTML,但我似乎无法让它工作。目前,我正在使用我的最终目标的简化版本进行测试。
我的项目树的相关片段:
-web
--dragonweb
---src
----app
-----dragon
-------dragon.css
-------dragon.html
-------dragon.spec.ts
-------dragon.ts
-------test.html
龙.html
<div ng-app = "" ng-controller="test">
testing
<div ng-include="" src="'app/src/dragon/test.html'"></div>
</div>
测试.html
<div>
This is an included file
</div>
网页上的预期输出:
测试
这是一个包含的文件。
网页上的实际输出:
测试
我尝试过使用不同长度的 test.html 路径,但没有成功。我也一直在使用 ng-controller 标签和 ng-include 标签的语法,但没有运气。网页中没有控制台错误。知道为什么它似乎不起作用吗?
背景故事/免责声明:我是这个项目的实习生,在首席开发人员突然离开后继承了这个项目,这是我第一次做任何形式的 Web 开发,我只是从试错中学习。因此,如果我做的事情非常不正确,我绝对会全力以赴地改进这个过程!我选择尝试使用 ng-include 是因为我们已经实现了 Angular,并且根据我的研究,这在理论上似乎是实现我想要的最简单的方法。
解决方案
您需要将 src 传递给 ng-include 指令而不是 src 属性:例如:
<div ng-include="'app/src/dragon/test.html'"></div>
或使用相对路径:
<div ng-include="'./test.html'"></div>
详情请查看官方文档
用法:作为元素:
<ng-include
src="'string_url'">
...
</ng-include>
作为属性:
<ANY_ELEMENT_TAG
ng-include="'string_url'">
...
</ANY_ELEMENT_TAG>
作为 CSS 类:
<ANY class="ng-include: string; [onload: string;] [autoscroll: string;]"> ... </ANY>
推荐阅读
- node.js - Nodejs - 无状态区分独特的设备
- android - Android DeviceCare 在自定义应用程序中禁用 GPS
- java - 如何更改文件夹以在项目中创建文件?
- java - xml 生成性能问题
- dictionary - 如何在类型的 map[int] 上实现接口
- r - 如何使用 glm gamma link=log 绘制点和模型的线?
- tensorflow - 与 GPU 相比,使用 TPU 进行训练时,Val_acc 会振荡且不收敛
- javascript - 如何使用角度设置页脚停留在页面底部?
- vb.net - 在文件中查找并获取文件名
- firebase - Firebase:使用 URL 变量重写/重定向 URL