it-roy-ru.com

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

Я впервые играю с 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, мой верхний и нижний колонтитулы не отображаются.

65
Oam Psy

Вы делаете включение заголовка . url вместо header. 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

142
Pieter Herroelen

У меня была похожая проблема с простым ng-include не рендерингом: 

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

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

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

95
cfranklin

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

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

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

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

18
GraehamF

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

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

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

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

2
Muhammad Ali Mansoor

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

Для меня я использовал 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>

и сейчас работает нормально. Ура!

2
FiringBlanks

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

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

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

2
Tim Anishere

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

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

1
Achuth I

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

1
Himesh V R

У меня тоже была похожая проблема: это была глупая ошибка, у меня было ниже textAreaEG: 

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