除非在$ scope中传递，否则AngularJS ng-include不包括视图

121

假设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部分。

angularjs angularjs-ng-include

— 乍得
source

Answers:

327

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

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

— 胡说
source

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

— 乍得

今天下午花了很多时间试图解决这个问题。的当然它必须是一个字符串。这使得完整的意义。

— 窃窃私语者

在应用模块中启用ngSanitize时不起作用。我正在寻找解决方案。

— 迪达

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

小单引号可以解决问题。我看不到确切的变化（我的眼睛不好）。请提及在单词的双引号内添加单引号。

— 斐济汗

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>

— 水仙
source