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

我试图包括一个ng-repeat内的HTML片段，但我不能让包括工作。ng-include的当前语法似乎与以前有所不同:我看到许多示例使用

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

但在官方文件里，说要用

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

但在页面下方，它显示为

<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>

我的代码片段不是很多代码，但它有很多内容;我在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中没有得到任何错误，如果我在dev tools中单击src="views/sidepanel.html"中的链接，它将带我到我的模板(并显示foo)。

当前回答

试试这个

<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

其他回答

    <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

你必须在src字符串的双引号内加上单引号:

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

源

2012-12-19 00:11:08

为了解决这些问题，重要的是要知道ng-include要求url路径来自应用程序的根目录，而不是来自与partial.html所在目录相同的目录。(而partial.html是可以找到内联ng-include标记标记的视图文件)。

例如:

正确的: div ng-include src=" '/views/partials/tabSlides/add-more.html' "> 不正确的: Div ng-include src=" 'add-more.html' ">

2013-11-16 19:39:29

试试这个

<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

这招对我很管用:

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

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

推荐文章

最新文章

标签