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.

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>

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>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.