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

当前回答

也许这对初学者有帮助

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

其他回答

试试这个

<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

也许这对初学者有帮助

<!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/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-build时，出现文件未找到(404)错误。所以我们可以使用下面的代码

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

本月,

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

2019-01-25 04:38:01

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

推荐文章

最新文章

标签