ng-include的正确语法是什么？

387

我试图在ng-repeat中包含一个HTML代码片段，但是我无法使这些包含工作。看来的ng-include目前的语法比它以前不同：我看到使用ng-include的正确语法是什么？

<div ng-include src="path/file.html"></div>

但在official docs很多例子，它说，使用

<div ng-include="path/file.html"></div>

但随后down the page它显示为

<div ng-include src="path/file.html"></div>

无论如何，我试图

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

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

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

<ng-include="views/sidepanel.html"></ng-include>

<ng:include src="views/sidepanel.html"></ng:include>

我的片段是不是很多代码，但它有很多事情;我在Dynamically load template inside ng-repeat中读到这可能会导致问题，所以我用foo这个词替换了sidepanel.html的内容，但仍然没有任何结果。

我也试过直接宣告模板的页面是这样的：

<script type="text/ng-template" id="tmpl"> 
    foo 
</script>

并通过对ng-include所有版本运行引用脚本的id，并且仍然一无所获。

我的页面有很多更在里面，但现在我已经剥离下来，只是这一点：

<!-- index.html --> 
<html> 
<head> 
<!-- angular includes --> 
</head> 
<body ng-view="views/main.html"> <!-- view is actually set in the router --> 
    <!-- views/main.html --> 
    <header> 
     <h2>Blah</h2> 
    </header> 
    <article id="sidepanel"> 
     <section class="panel"> <!-- will have ng-repeat="panel in panels" --> 
      <div ng-include src="views/sidepanel.html"></div> 
     </section> 
    </article> 
<!-- index.html --> 
</body> 
</html>

标题渲染，但后来我的模板没有。我在控制台或Node中没有出现错误，如果我在开发工具中单击src="views/sidepanel.html"中的链接，它会将我带入我的模板（并显示foo）。

来源

2012-12-18 jacob

752

你必须单引号您src字符串双引号内：

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

Source

来源

2012-12-19 00:11:08 jacob

是的，这一点我有一天。有点相关的答案http://stackoverflow.com/questions/13811948/different-ng-includes-on-the-same-page-how-to-send-different-variables-to-each/13812605#13812605 – jaime

+59

原因这就是ng标签中的任何字符串实际上都被评估为一个角度表达式。 ''告诉它它是一个字符串表达式。 – Gepsens

+33

@Gepsens：一旦你知道，它就有道理。如果文档提到它很明显，那将会很好。 – jacob

对于故障排除，重要的是要知道，NG-包括需要的URL路径是从应用程序的根目录而不是来自partial.html所在的目录。（而partial.html是可以找到内联ng-include标记标签的视图文件）。

例如：

正确： DIV NG-包括SRC = “ '/views/partials/tabSlides/add-more.html'”>

不正确： DIV NG-包括src =“'添加更多。HTML”“>

来源

2013-11-16 19:39:29

实际上，这并不完全正确：路径可以是相对的，但它与应用程序实例化的HTML文件相关。在你的“不正确”的例子中，如果“添加更多”，这将工作。html'与'app.html'位于同一个目录中。在我的回答中，'views /'与'app.html'位于同一个目录中。 – jacob

对于Laravel并将结构放置在公共文件夹（public/app/templates/includes）和调用文件为（public/app/templates/index.php）的情况下，包含路径需要为（app/templates /包括/ filetoinclude.php）。我无法相对工作。 –

对于那些谁正在寻找最短的 “项目渲染器” 从局部解决方案，所以NG重复和组合NG-包括：

<div ng-repeat="item in items" ng-include src="'views/partials/item.html'" />

实际上，如果你这样使用它作为一个中继器，它将工作，但不会为其中的2个！角度（v1.2.16）会因为某些原因而令你大吃一惊，如果你有两个这样的中继器，那么关闭div pre-xhtml方式更安全：

<div ng-repeat="item in items" ng-include src="'views/partials/item.html'"></div>

来源

2014-05-29 06:55:08 Balance

127

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

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

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

点要记住：

- > src中没有空间

- >记住使用单引号在双引号的SRC

来源

2014-06-23 13:59:47

'ng-include =“'...'”'语法看起来更好。 –

所以我假设ng-include不存在评论格式？ – OzzyTheGiant

也许这将帮助初学者

<!doctype html> 
<html lang="en" ng-app> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    <link rel="icon" href="favicon.ico"> 
    <link rel="stylesheet" href="custom.css"> 
    </head> 
    <body> 
    <div ng-include src="'view/01.html'"></div> 
    <div ng-include src="'view/02.html'"></div> 
    <script src="angular.min.js"></script> 
    </body> 
</html>

来源

2014-09-09 21:43:33

这为我工作：

ng-include src="'views/templates/drivingskills.html'"

完整的div：

<div id="drivivgskills" ng-controller="DrivingSkillsCtrl" ng-view ng-include src="'views/templates/drivingskills.html'" ></div>

来源

2014-09-12 21:12:28 Jackal

你不应该在同一个元素上结合'ng-view'和'ng-inclue';应在路由器中配置src（请参阅[templateUrl]（https://docs.angularjs.org/api/ngRoute/provider/$routeProvider#when））。 – jacob

@jacob所以你会如何加载这条路线？因为我可以让我的视图加载，我可以让我的控制器触发，但它们没有连接，视图加载空 –

@SonicSoul使用ngRouter并将其设置为模板。或者如果你的意思是在路径中使用路径参数，就像使用JavaScript表达式一样使用它：'someVar +'some string'' – jacob

试试这个

<div ng-app="myApp" ng-controller="customersCtrl"> 
    <div ng-include="'myTable.htm'"></div> 
</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller('customersCtrl', function($scope, $http) { 
    $http.get("customers.php").then(function (response) { 
     $scope.names = response.data.records; 
    }); 
}); 
</script>

来源

2016-02-15 11:20:15 jayaweb

ng-include的正确语法是什么？

回答

相关问题