Простой ng-include не работает

В первый раз я играю с AngularJS, и я пытаюсь использовать ng-include для своих верхних и нижних колонтитулов.

Здесь мое дерево:

myApp
assets
   - CSS
   - js
        - controllers
        - vendor
             - angular.js
             - route.js
             ......
             ......
             ......
        main.js
pages
   - partials
        - structure
              header.html
              navigation.html
              footer.html
   index.html
   home.html

index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>AngularJS Test</title>

    <script src="/assets/js/vendor/angular.js"></script>
    <script src="/assets/js/vendor/route.js"></script>
    <script src="/assets/js/vendor/resource.js"></script>
    <script src="/assets/js/main.js"></script>

</head>
    <body>          

        <div ng-include src="partials/structure/header.url"></div>
        <div ng-include src="partials/structure/navigation.url"></div>    

        <div id="view" ng-view></div>   

        <div ng-include src="partials/structure/footer.url"></div>
    </body>
</html>

main.js

var app = angular.module("app", ["ngResource", "ngRoute"]);


app.config(function($routeProvider) {

$routeProvider.when("/login", {
    templateUrl: "login.html",
    controller: "LoginController"
});

$routeProvider.when("/home", {
    templateUrl: "home.html",
    controller: "HomeController"
});

$routeProvider.otherwise({ redirectTo: '/home'});

});

app.controller("HomeController", function($scope) {
    $scope.title = "Home";
});

home.html

<div>
<p>Welcome to the {{ title }} Page</p>
</div>

Когда я перехожу на домашнюю страницу home.html, мой заголовок, навигатор и нижний колонтитул не отображаются.

Ответы

Ответ 1

Вы делаете включение заголовка. URL вместо заголовка. HTML. Похоже, вы хотите использовать литералы в атрибуте src, поэтому вы должны заключить их в кавычки, как упоминалось в комментариях @DRiFTy.

+ Изменить

 <div ng-include src="partials/structure/header.url"></div>
 <div ng-include src="partials/structure/navigation.url"></div>    

 <div id="view" ng-view></div>   

 <div ng-include src="partials/structure/footer.url"></div>

в

 <div ng-include src="'partials/structure/header.html'"></div>
 <div ng-include src="'partials/structure/navigation.html'"></div>    

 <div id="view" ng-view></div>   

 <div ng-include src="'partials/structure/footer.html'"></div>

Если это не работает, проверьте консоль браузера, если есть какие-либо 404

Ответ 2

У меня была аналогичная проблема с простым ng-include not render:

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

Я завернул путь к файлу в одинарных кавычках, и теперь он отображает:

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

Ответ 3

У меня была аналогичная проблема, которая привела меня сюда.

ng-include не заполнял содержимое моего частичного, но не было никаких ошибок в консоли, ни 404.

тогда я понял, что сделал.

исправьте меня: убедитесь, что у вас есть ng-app вне ng-include! так очевидно. цена Angular noob.

Ответ 4

Я также столкнулся с этой проблемой. И это то, что сработало для меня.

Итак, вместо написания: <div ng-include="'html/form.htm'"></div>

Вы хотите добавить ng-app="". Поэтому он должен выглядеть так: <div ng-app="" ng-include="'html/form.htm'"></div>

Ответ 5

Я боролся с той же проблемой и делал почти все, что было рекомендовано в разных стопках, но это не сработало для меня. На консоли я получал сообщение об ошибке:

"Запросы на кросс-начало поддерживаются только для схем протокола: http, data, chrome, chrome-extension, https, chrome-extension-resource."

Позже я понял, что я должен использовать локальный веб-сервер (MAMP, WAMP и т.д.), чтобы он работал.

Соблюдайте приведенное выше сообщение об ошибке. Скорее всего, вы не используете локальный веб-сервер для запуска вашего веб-сайта.

Ответ 6

Я просто понял это!

Для меня я использовал CDN для импорта моего файла angular.min.js, который, по-видимому, не работал. Я переключился на:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

и включил ng-app="" в тег моего тела:

<body ng-app="">
<div ng-include="'testfile.html'"></div>

и теперь он отлично работает. Ура!

Ответ 7

Да, без '', ng попытается оценить содержимое внутри ng-include("")

Эта оценка является еще одной причиной, по которой вы не ставите {{}} внутри этих директив.

Ответ 8

ng-include не работает как в Chrome, так и в проводнике, но работает в Firefox, так что это может быть проблемой совместимости. Чтобы быть уверенным, попробуйте сгенерировать отчет в Firefox или Edge или другом браузере.

Ответ 9

У меня тоже была похожая проблема: Глупая ошибка вызывала ИТ, у меня было ниже текста Зона EG:

<textarea cols="3" type="text" id="WarehouseAddress"  class="form-control" > '

Не был закрыт должным образом Исправлено ниже:

<textarea cols="3" type="text" id="WarehouseAddress"  class="form-control" ></textarea> 

<div ng-switch="vm.frmDOA.isGenerateDebitNote">
                <ng-include src="vm.showupload()"></ng-include>
            </div>

Мысль, чтобы отправить это может помочь любому, кого я копал часы, чтобы решить....

Ответ 10

Директива ng-include должна работать нормально, если вы просматриваете файл через какой-либо сервер (локальный или онлайн) и НЕ просматриваете его непосредственно в файловой системе, например (file:///yourpath/index.html).

Этот пример из w3schools должен работать нормально.