AngularJS ng-include tidak menyertakan view kecuali diteruskan dalam $ scope


121

Apakah salah untuk berasumsi bahwa ngIncludedapat mengambil jalan yang mentah? Saya terus mencoba mengatur saya ngIncludesebagai berikut:

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

Ini tidak berhasil tetapi jika saya melakukan sesuatu seperti ini, itu berhasil.

// HeaderController
app.controller('HeaderCtrl', function($scope){
   $scope.templates = {[
     template: { url: 'views/header.html' }
   ]};

   $scope.template = $scope.templates[0].template;
});

Di index.html saya

<div ng-controller="HeaderCtrl">
  <div ng-include src="template.url"></div>
</div>

Apakah ngIncludehanya kecuali nilai di luar ruang lingkup? Jika demikian mengapa demikian dan bukan termasuk langsung dari sebagian html.

Jawaban:


327

ng-includemenerima ekspresi. Jika Anda ingin menentukan URL eksplisit langsung di sana, Anda harus memberikan string.

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

Ya baru saja melihatnya. Contoh yang saya lihat menggunakan sudut versi lama.
Chad

44
Menghabiskan banyak waktu sore ini mencoba memikirkan yang satu ini. Tentu saja itu harus berupa string. Yang membuat lengkap akal.
Code Whisperer

tidak berfungsi dengan ngSanitize yang diaktifkan di modul aplikasi. Saya mencari solusi.
Dida

4
Satu hal lagi: Halaman tidak boleh memiliki garis bawah sebagai nama file.

5
Tanda kutip tunggal kecil memecahkan masalah. Saya tidak bisa melihat perubahan yang tepat (mata saya yang malang). Harap sebutkan tambahkan tanda kutip tunggal di dalam tanda kutip ganda pada kata-kata.
Fizer Khan

1

ng-include, karena direktif lain ( ng-class, ng-src...) mengevaluasi ekspresi Angular dari ruang lingkup. Tanpa tanda kutip ( ''), itu akan mencari variabel lingkup.


Perhatikan bahwa Anda tidak perlu menentukan srcatributnya.

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

Dapat ditulis ulang menjadi: (yang lebih sederhana)

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

Anda juga bisa menggunakan ng-include sebagai elemen :

<ng-include src="'views/header.html'"></ng-include>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.