AngularJS ng-include 不包含视图，除非传入 $scope

Posted 2023-02-23

【中文标题】AngularJS ng-include 不包含视图，除非传入 $scope

【英文标题】：AngularJS ng-include does not include view unless passed in $scope

【发布时间】：2012-09-13 08:48:43

【问题描述】：

假设ngInclude 可以采用原始路径是错误的吗？我一直在尝试将我的ngInclude 设置如下：

<div ng-include src="views/header.html"></div>

这不起作用，但如果我这样做，它确实有效。

// HeaderController
app.controller('HeaderCtrl', function($scope)
   $scope.templates = [
     template:  url: 'views/header.html' 
   ];

   $scope.template = $scope.templates[0].template;
);

在我的 index.html 中

<div ng-controller="HeaderCtrl">
  <div ng-include src="template.url"></div>
</div>

ngInclude 是否仅在范围之外的值除外？如果是这样，为什么会这样，而不是直接包含 html 部分。

【参考方案1】：

ng-include 接受一个表达式。 如果要直接在其中指定显式 URL，则必须提供一个字符串。

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

【讨论】：

是的，刚刚看到了。我正在查看的示例是使用旧版本的 angular。

今天下午花了很多时间试图弄清楚这一点。 当然它必须是一个字符串。这使得完整有意义。

不适用于在应用模块中启用 ngSanitize。我正在寻找解决方案。

还有一点：页面不能有下划线作为文件名。

小单引号解决问题。我看不到确切的变化（我可怜的眼睛）。请注意在单词中的双引号内添加单引号。

【参考方案2】：

ng-include，作为其他指令（ng-class，ng-src ...）从作用域评估 Angular 表达式。没有引号（''），它将搜索范围的变量。

---

请注意，您不必指定 src 属性。

<div ng-include src="'views/header.html'"></div>

可以改写为：（更简单）

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

---

您也可以将 ng-include 用作元素：

<ng-include src="'views/header.html'"></ng-include>