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.

angularjs angularjs-ng-include

— Chad
sumber

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>

— Omong kosong
sumber

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

— Chad

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

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

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

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>

— Mistalis
sumber