ng-includeの正しい構文は何ですか?


398

HTMLスニペットを内に含めようとしてng-repeatいますが、インクルードを機能させることができません。の現在の構文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動的に読み込むテンプレートを読み込んだので、のコンテンツsidepanel.htmlをのみという単語に置き換えましたがfoo、まだ何もありません。

また、次のようにページでテンプレートを直接宣言してみました。

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

ヘッダーはレンダリングされますが、私のテンプレートはレンダリングされません。コンソールまたはノードからエラーは発生しません。src="views/sidepanel.html"開発ツールでリンクをクリックすると、テンプレートに移動します(そしてが表示されますfoo)。

回答:


775

src二重引用符の内側で文字列を単一引用符で囲む必要があります。

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

ソース


4
はい、これは先日私を噛みました。やや関連する回答stackoverflow.com/questions/13811948/...
ハイメ・

60
これは、ngタグ内の文字列は実際には角度式として評価されるためです。''は文字列式であると伝えます。
Gepsens

37
@Gepsens:あなたが知ったらそれは理にかなっています。ドキュメンテーションが明示的にそれを述べていたらいいのですが。
ジェイコブ

1
ええ、私はなぜ彼らが「文字列」と言うのか知っています...発見のために+ jacobに感謝します
Shadoweb

7
私は同意します。Angularのドキュメント作成作業とレイアウトシステムが必要です。
Gepsens 2013

134
    <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の二重引用符では必ず単一引用符を使用してください


8
ng-include="'...'"構文は確かに良く見えます。
Pier-Luc Gendreau、2014

ng-includeがコメント形式で存在しないと思いますか?
OzzyTheGiant 2017年

50

これらのトラブルシューティングでは、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'">


6
実際、これは正確ではありません。パスは相対パスでもかまいませんが、アプリのインスタンス化元のhtmlファイルからの相対パスです。「不正な」例でadd-more.htmlは、がと同じディレクトリにある場合に機能しapp.htmlます。私の答えでviews/は、と同じディレクトリにありapp.htmlます。
jacob 2013年

Laravelの場合、構造をパブリックフォルダー(public / app / templates / includes)に配置し、呼び出しファイルは(public / app / templates / index.php)です。インクルードパスは(app / templates / includes)である必要があります。 /filetoinclude.php)。仕事に親しむことができませんでした。
Jason Spick 2014年

10

パーシャルから可能な限り短い「アイテムレンダラー」ソリューションを探している人のために、ng-repeatとng-includeの組み合わせ

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

実際、このように1台のリピーターに使用すると機能しますが、2台のリピーターには機能しません。Angular(v1.2.16)は、次の2つが次々にある場合、何らかの理由で異常動作するので、divをpre-xhtmlの方法で閉じる方が安全です。

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


これは数年後のことですが、これはまさに私がで作業するために必要なものでした<tbody ng-repeat="item in vm.items" ng-include="vm.searchTemplateBodyUrl" ng-cloak>。ありがとう!
エリックD.ジョンソン

9

多分これは初心者のために役立ちます

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

7

これは私のために働きました:

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

完全なdiv:

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

2
あなたは組み合わせるべきではないng-viewng-inclue同じ要素に。src(templateUrlを参照)はルーターで設定する必要があります。
ジェイコブ2015年

@jacobでは、これをルートとしてどのようにロードしますか?ビューをロードして、コントローラーをトリガーできますが、接続されていないため、ビューロードは空です
Sonic Soul

@SonicSoulはngRouterを使用してテンプレートとして設定します。または、パスでルートパラメータを使用する場合は、JavaScript式のように使用します:someVar + 'some string'
jacob

@jacob私はすでにngRouterを使用していますが、ng-includeでそのルートをロードする方法がわかりません.. src =でルートを使用する場合、ビューだけではなくサイト全体をロードします:( HTML、それはビューでコントローラーをロードしません
Sonic Soul

@SonicSoulは、ngRouterを介してロードしているビューにネストされたテンプレートをロードしようとしていますか?もしそうなら、私はあなたがsrcに提供する値はあなたのプロジェクトのディレクトリ構造(アプリのルートではない)の絶対パスであるべきだと思います。ngIncludeを使用してルートテンプレートを設定しようとしている場合、それは誤りです。それを超えて、これは6年前で、おそらく3年以上前にAngularJSを使用していません。
ジェイコブ2018

0

これを試して

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

-1

ng-buildで、ファイルが見つからない(404)エラーが発生します。したがって、以下のコードを使用できます

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

の本能、

<div ng-include="'views/transaction/test.html'"></div>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.