webentwicklung-frage-antwort-db.com.de

Einfaches ng-include funktioniert nicht

Ich spiele zum ersten Mal mit AngularJS und versuche, ng-include für meine Kopf- und Fußzeile zu verwenden.

Hier ist mein Baum:

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>

Wenn ich auf die home.html-Seite gehe, werden meine Kopfzeile, mein Navi und meine Fußzeile nicht angezeigt.

javascripthtmlangularjsangularjs-scope
64
Oam Psy

Sie machen ein Include von header. url anstelle von header.html . Anscheinend möchten Sie im src-Attribut Literale verwenden. Sie sollten sie also in Anführungszeichen setzen, wie in den Kommentaren von @DRiFTy erwähnt wurde.

Veränderung 

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

zu

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

Wenn dies nicht funktioniert, überprüfen Sie die Browserkonsole auf 404

142
Pieter Herroelen

Ich hatte ein ähnliches Problem mit einem einfachen ng-include, das nicht gerendert wurde: 

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

Ich habe den Dateipfad in einfache Anführungszeichen gesetzt und es wird nun Folgendes angezeigt:

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

95
cfranklin

ich hatte ein ähnliches Problem, das mich hier landete.

ng-include füllte den Inhalt meines Partials nicht aus, aber es gab keine Konsolenfehler oder 404-Fehler.

dann wurde mir klar was ich tat.

fix für mich: Stellen Sie sicher, dass Sie ng-app außerhalb des ng-include haben! so offensichtlich. der Preis für ein Angular Noob.

18
GraehamF

Ich hatte mit dem gleichen Problem zu kämpfen und habe fast alles getan, was in verschiedenen Stapeln empfohlen wurde, aber es funktionierte nicht für mich. Auf der Konsole wurde der Fehler angezeigt: 

"Cross Origin-Anforderungen werden nur für Protokollschemas unterstützt: http, data, chrome, chrome-extension, https, chrome-extension-resource."  

Später wurde mir klar, dass ich einen lokalen Webserver (MAMP, WAMP usw.) verwenden muss, damit es funktioniert.

Bitte achten Sie auf die obige Fehlermeldung. Möglicherweise verwenden Sie keinen lokalen Webserver, um Ihre Website auszuführen.

2
Muhammad Ali Mansoor

Ich habe es gerade herausgefunden! 

Für mich verwendete ich ein CDN zum Importieren der Datei angle.min.js, die anscheinend nicht funktionierte. Ich habe gewechselt zu: 

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

und ng-app="" in meinem Body-Tag enthalten:

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

und es funktioniert jetzt gut. Prost!

2
FiringBlanks

Ich bin auch auf dieses Problem gestoßen. Und das hat bei mir funktioniert.

Also, anstatt dies zu schreiben: <div ng-include="'html/form.htm'"></div>

Sie möchten ng-app="" hinzufügen. Es sollte also so aussehen: <div ng-app="" ng-include="'html/form.htm'"></div>

2
Tim Anishere

Ja, ohne '' würde ng versuchen, den Inhalt der ng-include("") auszuwerten

Diese Bewertung ist ein weiterer Grund, warum Sie {{}} nicht in diese Direktiven einfügen.

1
Achuth I

ng-include funktioniert nicht so gut in Chrome wie im Explorer, funktioniert aber in Firefox, daher könnte dies zu Kompatibilitätsproblemen führen. Um sicherzugehen, erstellen Sie den Bericht in Firefox, Edge oder einem anderen Browser.

1
Himesh V R

Ich hatte auch ein ähnliches Problem: Dummer Fehler verursachte IT, ich hatte unter textAreaEG: 

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

Wurde nicht richtig geschlossen Unten korrigiert:

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

Ich dachte mir, dass ich jemandem helfen könnte, Stunden zu lösen ...

0
Sunil Pandey