AngularJS ng-include nie obejmuje widoku, chyba że zostanie przekazany w $ scope

121

Czy błędem jest zakładanie, że ngIncludemoże to obrać surową ścieżkę? Wciąż próbuję ustawić moje ngIncludew następujący sposób:

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

To nie działa, ale jeśli zrobię coś takiego, to działa.

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

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

W moim pliku index.html

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

Czy ngIncludeoprócz wartości poza zakresem? Jeśli tak, dlaczego tak jest, a nie w prosty sposób dołączanie częściowej kodu HTML.

angularjs angularjs-ng-include Czad
źródło

Odpowiedzi:

327

ng-includeakceptuje wyrażenie. Jeśli chcesz podać wyraźny adres URL bezpośrednio w tym miejscu, musisz podać ciąg.

<div ng-include src="'page.html'"></div>
Bzdury
źródło
Właśnie to widziałem. Przykłady, na które patrzyłem, dotyczyły starszej wersji angular.
Czad
44
Spędziłam dziś po południu dużo czasu, próbując to rozgryźć. Od kursu musi być ciągiem. To sprawia, że pełny sens.
Zaklinacz kodów
nie działa z ngSanitize włączonym w module aplikacji. Szukam rozwiązania.
Dida,
4
Jeszcze jedno: strona nie może mieć podkreślenia jako nazwy pliku.
5
Małe pojedyncze cudzysłowy rozwiązują problem. Nie widziałem dokładnej zmiany (moje słabe oko). Proszę wspomnieć o dodaniu pojedynczych cudzysłowów wewnątrz podwójnych cudzysłowów w słowach.
Fizer Khan,
1

ng-include, ponieważ inne dyrektywy ( ng-class, ng-src...) obliczają wyrażenie kątowe z zakresu. Bez cudzysłowów ( '') wyszuka zmienną o zakresie.

Pamiętaj, że nie musisz określać srcatrybutu.

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

Można przepisać na: (to jest prostsze)

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

Możesz również użyć ng-include jako elementu :

<ng-include src="'views/header.html'"></ng-include>
Mistalis
źródło