AngularJS ng-include не включает представление, если оно не передано в $ scope

121

Неправильно ли предполагать, что ngIncludeможно пойти по сырому пути? Я все время пытаюсь установить ngIncludeследующее:

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

Это не работает, но если я сделаю что-то подобное, это сработает.

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

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

В моем index.html

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

Исключает ngIncludeтолько значения за пределами области видимости? Если да, то почему это так, а не прямое включение партиала html.

angularjs angularjs-ng-include

— Чад
источник

Ответы:

327

ng-includeпринимает выражение. Если вы хотите указать явный URL прямо там, вам нужно указать строку.

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

— вздор
источник

Да только что видел это. Примеры, на которые я смотрел, использовали старую версию angular.

— Чад

Сегодня днем потратил много времени, пытаясь понять это. Из конечно , он должен быть строкой. Это делает полный смысл.

— Code Whisperer

не работает с включенным ngSanitize в модуле приложения. Ищу решение.

— Дида

Еще одна вещь: страница не может иметь подчеркивания в качестве имени файла.

Небольшие одинарные кавычки решают проблему. Я не видел точных изменений (мой плохой глаз). Пожалуйста, не забудьте добавить одинарные кавычки внутри двойных кавычек в словах.

— Fizer Khan

ng-include, поскольку другие директивы ( ng-class, ng-src...) оценивают выражение Angular из области видимости. Без кавычек ( '') он будет искать переменную в области видимости.

Обратите внимание, что srcатрибут указывать не обязательно .

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

Можно переписать на: (что проще)

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

Вы также можете использовать ng-include как элемент :

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

— Mistalis
источник