web-dev-qa-db-ja.com

Ng-includeの正しい構文は何ですか？

私はng-repeatの中にHTMLスニペットを含めようとしていますが、インクルードをうまく動かすことができません。現在のng-includeの構文は、以前の構文とは異なるようです。

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

しかし、 official docs では、使うように言っています

<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の内容を単なるWordのfooに置き換え、それでも何もしません。

私はまたこのようにページで直接テンプレートを宣言しようとしました：

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

スクリプトのidを参照するng-includeのすべてのバリエーションを実行していますが、それでも何もありません。

私のページにはもっとたくさんのページが含まれていましたが、今私はこれをまさにこれに落としました：

<!-- 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ツールのsrc="views/sidepanel.html"のリンクをクリックすると、自分のテンプレートに移動します（そしてfooが表示されます）。

javascripthtml5includeangularjsrepeater
397
jacob

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

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

出典

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

OR

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

OR

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

覚えておくべきポイント：

- > srcに空白がない

- > srcの二重引用符で一重引用符を使用することを忘れないでください

132
Kalpesh Prajapati

このような問題を解決するためには、ng-includeには、partial.htmlが存在するのと同じディレクトリではなく、アプリのルートディレクトリからのURLパスが必要であることを知っておくことが重要です。 （partial.htmlはインラインのng-includeマークアップタグが見つかるビューファイルです）。

例えば：

正解：div ng-include src = "'/views/partials/tabSlides/add-more.html'">

間違っている：div ng-include src = "'add-more.html'">

49
Benjamin McFerren

たぶんこれは初心者に役立つでしょう

<!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>
9
BG Bruno

パーシャルから最短の「アイテムレンダラー」ソリューションを探している人のために、 ng-repeatとng-includeのコンボ ：

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

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

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

9
Balance

これは私のために働いた：

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
Jackal

これを試して

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

NG-ビルドでは、（404）エラーが発生しファイルが見つかりません。だから我々は、コードの下に使用することができます

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

instedの、 

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