Apa sintaks yang benar dari ng-include?

398

Saya mencoba memasukkan cuplikan HTML ke dalam sebuah ng-repeat, tetapi saya tidak dapat membuat cantuman berfungsi. Tampaknya sintaksis saat ng-includeini berbeda dari apa yang sebelumnya: Saya melihat banyak contoh menggunakan

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

Namun dalam dokumen resmi , dikatakan digunakan

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

Tapi kemudian turun halaman itu ditampilkan sebagai

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

Bagaimanapun, saya mencoba

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

Cuplikan saya tidak terlalu banyak kode, tetapi banyak yang terjadi; Saya membaca secara dinamis memuat template di dalamnyang-repeat yang dapat menyebabkan masalah, jadi saya mengganti konten sidepanel.htmlhanya dengan kata foo, dan masih tidak ada.

Saya juga mencoba mendeklarasikan templat langsung di halaman seperti ini:

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

Dan menjalankan semua variasi ng-includereferensi skrip id, dan masih tidak ada.

Halaman saya memiliki lebih banyak di dalamnya, tetapi sekarang saya telah mengupasnya menjadi hanya ini:

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

Header merender, tapi kemudian templat saya tidak. Saya tidak mendapatkan kesalahan di konsol atau dari Node, dan jika saya mengklik tautan di src="views/sidepanel.html"alat dev, itu akan membawa saya ke template saya (dan menampilkan foo).

javascript html include angularjs repeater Jacobs
sumber

Jawaban:

775

Anda harus mengutip srcstring Anda di dalam kutipan ganda:

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

Sumber

Jacobs
sumber
4
ya, ini menggigit saya tempo hari. Agak terkait jawaban stackoverflow.com/questions/13811948/…
jaime
60
Alasan untuk ini adalah bahwa setiap string dalam tag sebenarnya dievaluasi sebagai ekspresi sudut. '' Memberitahu itu bahwa itu adalah ekspresi string.
Gepsens
37
@ Gepsens: masuk akal begitu Anda tahu. Akan lebih baik jika dokumentasi menyebutkannya dengan jelas.
jacob
1
Ya sekarang saya tahu mengapa mereka mengatakan "string" ... Terima kasih + jacob untuk penemuannya
Shadoweb
7
Saya setuju, kami jelas membutuhkan upaya dokumentasi tentang Angular, dan sistem tata letak.
Gepsens
134 
    <ng-include src="'views/sidepanel.html'"></ng-include>

ATAU

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

ATAU

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

Poin Yang Harus Diingat:

-> Tidak ada spasi di src

-> Ingatlah untuk menggunakan kutip tunggal dalam kutip ganda untuk src

Kalpesh Prajapati
sumber
8
The ng-include="'...'"sintaks pasti terlihat lebih baik.
Pier-Luc Gendreau
jadi saya berasumsi ng-include tidak ada dalam format komentar?
OzzyTheGiant
50

Bagi mereka yang melakukan pemecahan masalah, penting untuk mengetahui bahwa ng-include membutuhkan jalur url dari direktori root aplikasi dan bukan dari direktori yang sama di mana partial.html tinggal. (sedangkan partial.html adalah file tampilan yang dapat ditemukan oleh tag mark-in inline ng-termasuk).

Sebagai contoh:

Benar: div ng-include src = "'/views/partials/tabSlides/add-more.html'">

Salah: div ng-include src = "'add-more.html'">

Benjamin McFerren
sumber
6
Sebenarnya, ini tidak sepenuhnya benar: jalur BISA relatif, tetapi relatif terhadap file html dari mana aplikasi itu dipakai. Dalam contoh "salah" Anda, itu akan berfungsi jika add-more.htmlberada di direktori yang sama dengan app.html. Dalam jawaban saya, views/ada di direktori yang sama dengan app.html.
jacob
Dalam kasus dengan Laravel dan menempatkan struktur di folder publik (publik / app / templates / include) dan file panggilannya adalah (public / app / templates / index.php) jalur sertakan yang diperlukan (app / templates / include /filetoinclude.php). Saya tidak dapat bekerja relatif.
Jason Spick
10

Bagi mereka yang mencari solusi "item renderer" sesingkat mungkin dari sebagian, jadi kombo dari ng-repeat dan ng-termasuk :

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

Sebenarnya, jika Anda menggunakannya seperti ini untuk satu repeater, itu akan berhasil, tetapi tidak untuk 2 dari mereka! Angular (v1.2.16) akan panik karena beberapa alasan jika Anda memiliki 2 dari ini satu demi satu, jadi lebih aman untuk menutup div dengan cara pre-xhtml:

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

Keseimbangan
sumber
ini bertahun-tahun kemudian, tetapi inilah tepatnya yang saya butuhkan untuk bekerja di sebuah <tbody ng-repeat="item in vm.items" ng-include="vm.searchTemplateBodyUrl" ng-cloak>. Terima kasih!
Eric D. Johnson
9

Mungkin ini akan membantu pemula

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

Ini bekerja untuk saya:

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

div lengkap:

<div id="drivivgskills" ng-controller="DrivingSkillsCtrl" ng-view ng-include src="'views/templates/drivingskills.html'" ></div>
Serigala
sumber
2
Anda seharusnya tidak menggabungkan ng-viewdan ng-incluepada elemen yang sama; src (lihat templateUrl ) harus dikonfigurasi di router Anda.
jacob
@ jacob jadi bagaimana Anda memuat ini sebagai rute ?? karena saya bisa mendapatkan pandangan saya untuk memuat, dan saya bisa membuat controller saya untuk memicu, tetapi mereka tidak terhubung, melihat beban kosong
Sonic Soul
@SonicSoul menggunakan ngRouter dan mengaturnya sebagai templat. Atau jika Anda bermaksud menggunakan params rute di jalur, gunakan saja seperti ekspresi JavaScript:someVar + 'some string'
jacob
@ jacob saya sudah menggunakan ngRouter tetapi saya tidak tahu cara memuat rute itu di ng-include .. jika saya menggunakan rute di src = hanya memuat seluruh situs bukan hanya tampilan :( jika saya memuatnya dengan jalur relatif ke html, itu tidak memuat controller dengan tampilan
Sonic Soul
@SonicSoul Anda mencoba memuat templat bersarang dalam tampilan yang memuat melalui ngRouter? Jika demikian, saya pikir nilai yang Anda berikan kepada src harus menjadi jalur absolut dalam struktur direktori proyek Anda (bukan rute aplikasi). Jika Anda mencoba mengatur templat rute menggunakan ngInclude, itu salah. Lebih dari itu, ini adalah 6 tahun yang lalu, dan saya belum pernah menggunakan AngularJS dalam 3 tahun mungkin.
jacob
0

coba ini 

<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>
jayaweb
sumber
-1

Pada ng-build, kesalahan file tidak ditemukan (404) terjadi. Jadi kita bisa menggunakan kode di bawah ini

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

insted dari, 

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