Простой ng-включить не работает

Я играю с 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

.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>

главная.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";
});

дома.HTML-код

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

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

9 64
javascript angularjs html angularjs-scope

9 ответов:

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

изменить 

 <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 по

141

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

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

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

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

93

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

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

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

исправить для меня: убедитесь, что у вас есть ng-app за пределами ng-include! столь очевидный. цена того, чтобы быть угловым нубом.

17

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

вместо того, чтобы писать это:<div ng-include="'html/form.htm'"></div>

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

2

Я только что понял это!

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

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

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

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

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

2

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

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

1

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

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

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

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

1

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

1

у меня тоже была подобная проблема: глупая ошибка была причиной этого , у меня было ниже textArea Например:

<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>

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

0