Jaka jest prawidłowa składnia ng-include?

387

Próbuję dołączyć fragment kodu HTML do kodu ng-repeat, ale nie mogę go włączyć. Wydaje się, że obecny składnia ng-include jest inna niż to, co było wcześniej: Widzę wiele przykładów z wykorzystaniemJaka jest prawidłowa składnia ng-include?

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

ale w official docs, to mówi do korzystania

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

Ale wtedy down the page jest pokazany jako

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

Niezależnie, próbowałem

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

Moja fragment nie jest bardzo dużo kodu, ale ma dużo dzieje; Przeczytałem w Dynamically load template inside ng-repeat, że może to spowodować problem, więc zastąpiłem treść sidepanel.html tylko słowem foo i nadal nic.

Próbowałem też deklarując szablon bezpośrednio na stronie tak:

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

i uruchomiony przez wszystkich odmianach ng-include odwołanie do skryptu id i nadal nic.

Moja strona miała dużo więcej w nim, ale teraz pozbawiono go po prostu w ten sposób:

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

Nagłówek świadczy, ale wtedy mój szablon nie. Nie otrzymuję żadnych błędów w konsoli ani w węźle, a jeśli kliknę link w src="views/sidepanel.html" w narzędziach programistycznych, przeniesie mnie do mojego szablonu (i wyświetli foo).

Źródło

2012-12-18 jacob

752

Trzeba pojedynczy cudzysłów swój ciąg src wewnątrz podwójnych cudzysłowów:

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

Source

Źródło

2012-12-19 00:11:08 jacob

tak, trochę mnie to ostatnio. Nieco powiązana odpowiedź http://stackoverflow.com/questions/13811948/different-ng-includes-on-the-same-page-how-to-send-different-variables-to-each/13812605#13812605 – jaime

+59

Powód oznacza to, że każdy ciąg w tagach ng jest w rzeczywistości oceniany jako wyrażenie kątowe. "mówi, że jest to wyrażenie łańcuchowe. – Gepsens

+33

@Gepsens: ma to sens, gdy już wiesz. Byłoby miło, gdyby dokumentacja wspominała o tym wyraźnie. – jacob

Dla tych usterek, ważne jest, aby wiedzieć, że ng obejmują wymaga ścieżkę url być z katalogu głównego aplikacji, a nie z tego samego katalogu, w którym znajduje się plik partial.html. (while partial.html jest plikiem widoku, który można znaleźć wbudowany znacznik ng-include).

Na przykład:

Poprawnie: Div ng obejmować SRC = " '/views/partials/tabSlides/add-more.html'">

Nieprawidłowo: Div ng obejmują src = "'add-more.html”„>

Źródło

2013-11-16 19:39:29

Właściwie nie jest to dokładnie poprawne: ścieżka CAN może być względna, ale jest względna w stosunku do pliku html, z którego utworzono aplikację. W twoim "niepoprawnym" przykładzie działałoby to, gdyby 'dodać więcej.html' znajdował się w tym samym katalogu co 'app.html'. W mojej odpowiedzi 'views /' znajduje się w tym samym katalogu, co 'app.html'. – jacob

W przypadku programu Laravel i umieszczenia struktury w folderze publicznym (public/app/templates/includes), a plikiem wywołującym jest (public/app/templates/index.php) ścieżka dołączania musi być (app/templates/obejmuje/filetoinclude.php). Nie mogłem dostać się do pracy. –

Dla tych, którzy poszukują możliwie najkrótszym "item renderer" rozwiązania z częściowego, więc kombi NG-repeat i ng obejmują:

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

Właściwie, jeśli użyjesz go w ten sposób dla jednego przemiennika, zadziała, ale nie dla 2 z nich! Kątowy (v1.2.16) z jakiegoś powodu zadzwoni, jeśli masz 2 z nich po kolei, więc bezpieczniej jest zamknąć div pre-xhtml sposób:

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

Źródło

2014-05-29 06:55:08 Balance

127

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

LUB

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

LUB

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

Punkty do zapamiętania:

-> Bez spacji w src

-> Pamiętaj, aby używać pojedynczy cytat w cytacie na podwójnym src

Źródło

2014-06-23 13:59:47

Składnia 'ng-include =" '...' "' zdecydowanie wygląda lepiej. –

, więc zakładam, że ng-include nie istnieje w formacie komentarza? – OzzyTheGiant

Może to pomoże początkującym

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

Źródło

2014-09-09 21:43:33

Ten pracował dla mnie:

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

kompletny div:

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

Źródło

2014-09-12 21:12:28 Jackal

Nie powinieneś łączyć 'ng-view' i' ng-inclue' na tym samym elemencie; src (patrz [templateUrl] (https://docs.angularjs.org/api/ngRoute/provider/$routeProvider#when)) należy skonfigurować w routerze. – jacob

@jacob, więc jak załadowałbyś to jako trasę? ponieważ mogę załadować mój widok, i mogę uruchomić kontroler, ale nie są połączone, wyświetl ładunki puste –

@SonicSoul użyj ngRoutera i ustaw go jako szablon. Lub jeśli masz na myśli użycie paramingu trasy w ścieżce, użyj go jak wyrażenie JavaScript: 'someVar + 'string'' – jacob

spróbuj tego

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

Źródło

2016-02-15 11:20:15 jayaweb

Jaka jest prawidłowa składnia ng-include?

Odpowiedz

Powiązane problemy