在Angularjs中多次使用ngInclude

Question

在Angularjs中多次使用ngInclude

3

我有这个小脚本，Angular控制器完全为空，所以没有任何内容。

我的问题是为什么我无法运行ngIncludes（顺便说一下没有错误）？

<!DOCTYPE html>
<html ng-app="demo">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height    attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta name="msapplication-tap-highlight" content="no" />

<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="bower_components/angularjs/angular.min.js"></script>
</head>
<body>

<div ng-controller="main">
<ng-include src="'templates/android/header.html'" />
<ng-include src="'templates/android/newsfeed.html'" />
</div>

- user1645908

1

可以先去掉你的“src”上的单引号。 - joeltine

那不是一个好主意，因为这会确保它在js解析器中是一个字符串。 - user1645908

你能在 Fiddle/Planker 中重现那个问题吗？ - Maxim Shoustin

我会尝试：<div ng-include="templates/android/header.html"></div> - Maxim Shoustin

4个回答

0

你能像这样不带src属性开始吗：

如果你给出这种类型，它不会显示任何错误消息ngInclude属性绑定，因此它不会显示任何错误消息。

<data-ng-include="'templates/android/header.html'" />
<data-ng-include="'templates/android/newsfeed.html'" />

正确的方式是这样的：

<div data-ng-include="'templates/android/header.html'"></div>
<div data-ng-include="'templates/android/newsfeed.html'"></div>

- parthicool05

我刚刚尝试了你的例子，它返回了第一个包含。对于第二个，出现了以下错误：TypeError: Cannot read property 'insertBefore' of null。 - user1645908

在ngInclude中不使用src属性。ngInclude类似于src属性。 - parthicool05

我刚刚编辑了自己的文本，因为我打错了一些字。但是它仍然显示那个错误。 - user1645908

不，它仍然无法工作。如果我在使用W3应用程序语法时，会出现前面提到的错误，如果没有，则不会返回任何错误，但在两种情况下都只显示第一个包含文件。 - user1645908

我已经完成了，两个包含的项目都会显示在我的网站上，没有显示任何错误... - parthicool05

朋友，你能否发送你的项目文件夹结构？ - parthicool05

0

我更喜欢有效的HTML，并建议您：

<div data-ng-include="'templates/android/header.html'"></div>
<div data-ng-include="'templates/android/newsfeed.html'"></div>

- Miraage

你的示例没有返回任何错误，但只返回第一个包含文件，然后我又回到了原点。总的来说，我的问题是我不能做多个包含文件（下一个根本没有显示出来）。如果我表达不够清楚，那么请见谅。 - user1645908

0

实际上，这个问题对我来说不是很清楚，但我尝试了这样做，它正确地工作了：

 <body ng-controller="MainCtrl">
     <div ng-include src='"file1.html"'></div>
     <div ng-include src='"file2.html"'></div>
  </body>

演示

- Narek Mamikonyan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andre Medeiros · Accepted Answer

我有过同样的问题，但是在我的情况下，我没有正确闭合div标签：

<div ng-include="'partials/agendar.html'">
<div ng-include="'partials/atendimento.html'">

我看到你那样做了，但你使用的是'tg-include'作为标签。试试这样做(对我来说完美地工作了)。确保你的angular已更新，然后仅使用 'ng-include'(没有'data-'):

<div ng-include="'partials/agendar.html'"></div>
<div ng-include="'partials/atendimento.html'"></div>

希望能对您有所帮助。