Ng-include'ın doğru sözdizimi nedir?


398

Ben içine bir HTML pasajı dahil etmeye çalışıyorum ng-repeat, ama çalışmak için dahil alınamıyor. Şu andaki sözdiziminin ng-includeöncekinden farklı olduğu anlaşılıyor:

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

Ancak resmi dokümanlarda ,

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

Ama sonra sayfanın altında şu şekilde gösterilir:

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

Ne olursa olsun denedim

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

Snippet'im çok fazla kod değil, ama çok şey oluyor; Dinamik olarak yük şablonundang-repeat sorun yaratabilecek şekilde okudum , bu yüzden içeriğini sidepanel.htmlsadece kelime foove hala hiçbir şeyle değiştirdim.

Ben de doğrudan böyle sayfada şablon ilan etmeye çalıştım:

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

Ve ng-includesenaryoyu referans almanın tüm varyasyonlarından geçiyor idve yine de hiçbir şey yok.

Sayfam çok daha fazla vardı, ama şimdi sadece bu sıyırma:

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

Üstbilgi oluşturulur, ancak şablonum görünmez. Konsolda veya Düğümden herhangi bir hata almıyorum ve geliştirici src="views/sidepanel.html"araçlarındaki bağlantıyı tıklarsam, beni şablonuma (ve ekranlara foo) götürür .

Yanıtlar:


775

srcDizenizi çift tırnak içine almanız gerekir :

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

Kaynak


4
evet, geçen gün beni biraz ısırdı. Biraz ilgili cevap stackoverflow.com/questions/13811948/…
jaime

60
Bunun nedeni, ng etiketlerindeki herhangi bir dizenin aslında bir açısal ifade olarak değerlendirilmesidir. '' bunun bir dize ifadesi olduğunu söyler.
Şubat'ta Gepsens

37
@Gepsens: Bildiğiniz zaman mantıklı. Belgelerin açıklıktan bahsetmesi güzel olurdu.
jacob

1
Evet şimdi neden "string" diyorlar biliyorum ... Bulmak için teşekkürler + jacob
Shadoweb

7
Katılıyorum, kesinlikle açısal bir dokümantasyon çabasına ve bir düzen sistemine ihtiyacımız var.
Şubat'ta Gepsens

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

VEYA

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

VEYA

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

Hatırlanacak noktalar:

-> src'de boşluk yok

-> src için çift tırnak içinde tek tırnak kullanmayı unutmayın


8
ng-include="'...'"Sözdizimi kesinlikle daha iyi görünüyor.
Pier-Luc Gendreau

Bu yüzden ng-include yorum biçiminde olmadığını varsayalım?
OzzyTheGiant

50

Bu sorun giderme için ng-include komutunun url yolunun, partial.html dosyasının yaşadığı aynı dizinden değil, uygulama kök dizininden olmasını gerektirdiğini bilmek önemlidir. (oysa, partial.html satır içi ng-içeren biçimlendirme etiketinin bulunabileceği görünüm dosyasıdır).

Örneğin:

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

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


6
Aslında, bu tam olarak doğru değildir: yol göreceli olabilir, ancak uygulamanın başlatıldığı html dosyasına göredir. "Yanlış" örneğinizde, add-more.htmlile aynı dizinde olsaydı bu işe yarardı app.html. Cevabımda, views/ile aynı dizinde app.html.
jacob

Laravel ve yapının ortak klasöre yerleştirilmesi durumunda (public / app / templates / include) ve çağıran dosya (public / app / templates / index.php) olması gereken ekleme yoludur (app / templates / include) /filetoinclude.php). İş göreli alamadım.
Jason Spick

10

Kısmi olarak mümkün olan en kısa "öğe oluşturucu" çözümünü arayanlar için, ng-tekrar ve ng-içeren bir kombinasyon şunları içerir :

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

Aslında, bir tekrarlayıcı için böyle kullanırsanız, işe yarayacak, ancak ikisi için olmayacak! Açısal (v1.2.16), bunlardan 2 tane arka arkaya sahipseniz, bazı nedenlerden dolayı korkar, bu nedenle div öncesi xhtml yolunu kapatmak daha güvenlidir:

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


Bu yıllar sonra, ama tam olarak çalışmak için gereken buydu <tbody ng-repeat="item in vm.items" ng-include="vm.searchTemplateBodyUrl" ng-cloak>. Teşekkürler!
Eric D. Johnson

9

Belki bu yeni başlayanlar için yardımcı olacaktır

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

Bu benim için çalıştı:

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

tam div:

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

2
Sen birleştirmek gerektiğini ng-viewve ng-inclueaynı elemana; src (bkz. templateUrl ) yönlendiricinizde yapılandırılmalıdır.
jacob

@jacob Peki bunu bir rota olarak nasıl yüklersiniz ?? çünkü yükümün yüklenmesini sağlayabilirim ve denetleyicimin tetiklenmesini sağlayabilirim, ancak bağlı değiller, yükleri boş olarak görüntüleyebilir
Sonic Soul

@SonicSoul ngRouter kullanın ve şablon olarak ayarlayın. Veya yoldaki rota parametrelerini kullanmak istiyorsanız, bunu bir JavaScript ifadesi gibi kullanın:someVar + 'some string'
jacob

@jacob zaten ngRouter kullanın ama ng-include bu yolu yüklemek için nasıl bilmiyorum .. Eğer src = bir yol kullanırsanız sadece görünüm sadece değil tüm siteyi yükler :( ben göreceli yolu ile yüklerseniz html, denetleyiciyi manzaralı
Sonic Soul

@SonicSoul, ngRouter üzerinden yüklenen bir görünümde iç içe şablon yüklemeye mi çalışıyorsunuz? Eğer öyleyse, src'ye sağladığınız değerin projenizin dizin yapısında (uygulama rotası değil) mutlak bir yol olması gerektiğini düşünüyorum. NgInclude kullanarak rota şablonunu ayarlamaya çalışıyorsanız, bu yanlıştır. Bunun ötesinde, bu 6 yıl önceydi ve muhtemelen 3 yıldan fazla bir süredir AngularJS kullanmadım.
jacob

0

bunu dene

<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'de dosya bulunamadı (404) hatası oluşuyor. Bu yüzden aşağıdaki kodu kullanabiliriz

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

,

<div ng-include="'views/transaction/test.html'"></div>
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.