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

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,

Jeszcze jedno: strona nie może mieć podkreślenia jako nazwy pliku.

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,

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