首页 文章

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

提问于
浏览 次
396

我正在尝试在 ng-repeat 中包含一个HTML代码段，但我无法让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>

Headers 呈现，但我的模板没有 . 我在控制台或Node中没有错误，如果我点击开发工具中 src="views/sidepanel.html" 中的链接，它会转到我的模板（并显示 foo ） .

javascript html5 include angularjs repeater

7 回答

  • 9

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

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

    Source

    回复于
  • 9
    <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的双引号中使用单引号

    回复于
  • 132

    对于那些故障排除，重要的是要知道ng-include要求url路径来自app根目录，而不是来自partial.html所在的同一目录 . （而partial.html是可以找到内联ng-include标记标记的视图文件） .

    例如：

    正确：div ng-include src =“'/views/partials/tabSlides/add-more.html'”>不正确：div ng-include src =“'add-more.html'”>

    回复于
  • 0

    对于那些正在寻找部分最短的解决方案的人来说，所以 a combo of ng-repeat and ng-include ：

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

    实际上，如果你像这样使用一个中继器，它会工作，但不会对其中2个中继器！ Angular（v1.2.16）会因为某种原因而出于某种原因而变得惊慌失措，因此以前xhtml方式关闭div会更安全：

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

    回复于
  • 48

    也许这对初学者有帮助

    <!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>
    回复于
  • 765

    这对我有用：

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

    完整div：

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

    试试这个

    <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>
    回复于

相关问题