Ich spiele zum ersten Mal mit AngularJS und habe Probleme, ng-include für meine Kopf- und Fußzeilen 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 Kopf-, Navigations- und Fußzeilen nicht angezeigt.
javascript
html
angularjs
angularjs-scope
Oam Psy
quelle
quelle
Antworten:
Sie machen einen Include-Header. URL statt Header. html . Es sieht so aus, als ob Sie Literale im src-Attribut verwenden möchten, daher sollten Sie sie in Anführungszeichen setzen, wie in den Kommentaren von @DRiFTy erwähnt.
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, ob 404 vorhanden sind
quelle
src="'partials/structure/header.html'"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 er rendert jetzt:
<div ng-include="'views/footer.html'"></div>quelle
Ich hatte ein ähnliches Problem, das mich hier landete.
ng-includefüllte nicht den Inhalt meines Teils, aber es gab keine Konsolenfehler, noch 404.dann wurde mir klar, was ich tat.
Fix für mich: Stellen Sie sicher, dass Sie
ng-appaußerhalb der habenng-include! so offensichtlich. der Preis, ein Angular Noob zu sein.quelle
<div ng-app>. Absurd.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 hinzufügen
ng-app="". So sollte es aussehen:<div ng-app="" ng-include="'html/form.htm'"></div>quelle
<body ng-app="">Ich hatte mit dem gleichen Problem zu kämpfen und habe fast alles getan, was in verschiedenen Stapeln empfohlen wurde, aber es hat bei mir nicht funktioniert. Auf der Konsole wurde der Fehler angezeigt:
"Cross-Origin-Anforderungen werden nur für Protokollschemata 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 beachten Sie die obige Fehlermeldung. Möglicherweise verwenden Sie keinen lokalen Webserver, um Ihre Website auszuführen.
quelle
Ich habe es gerade herausgefunden!
Für mich verwendete ich ein CDN zum Importieren meiner Datei angle.min.js, die anscheinend nicht funktionierte. Ich wechselte 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!
quelle
Ja, ohne das
''würde ng versuchen, den Inhalt innerhalb des zu bewertenng-include("")Diese Bewertung ist ein weiterer Grund, warum Sie
{{}}diese Richtlinien nicht einfügen.quelle
ng-include funktioniert nicht sowohl in Chrome als auch im Explorer, sondern in Firefox. Dies kann also zu Kompatibilitätsproblemen führen. Versuchen Sie sicher, den Bericht in Firefox oder Edge oder einem anderen Browser zu generieren.
quelle
Auch ich hatte ein ähnliches Problem: Dummer Fehler verursachte IT, ich hatte unten textArea EG:
<textarea cols="3" type="text" id="WarehouseAddress" class="form-control" > `Wurde nicht richtig geschlossen Korrigiert unten:
<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, es zu posten könnte jedem helfen, den ich stundenlang gegraben habe, um es zu lösen ...
quelle
Die ng-include-Datei funktioniert nur für Dateien, die vom Webserver abgerufen werden (benötigt etwa den Link http: //mywebsite/myinclude.html ). Es funktioniert nicht, wenn Sie Dateien direkt aus dem lokalen Ordner abrufen (c: \ myinclude.html funktioniert nicht).
quelle
Die ng-include- Direktive sollte nur normal funktionieren, wenn Sie Ihre Datei über einen Server (localhost oder online) anzeigen und Ihre Datei NICHT direkt im Dateisystem anzeigen anzeigen wie (file: ///yourpath/index.html) anzeigen.
Dieses Beispiel von w3schools sollte gut funktionieren.
quelle