Angular JS-Fehlermeldung: $kompilieren:tpload: Fehler beim laden der Vorlage:
So, ich bin versucht, laden Sie die Vorlage in meinem Richtlinie. Diese Richtlinie ist wiederverwendbar. Aber ich bin nicht geladen werden kann die Vorlage. Ich habe andere templates geladen sind und ordnungsgemäß funktionieren.
Den Fehler, das bin ich immer :
GET /ClassificationToolkitForGrails/classificationviewer.html 404 (Not Found) angular.js:8521
Error: [$compile:tpload] Failed to load template: classificationviewer.html
Den javascript - Datei mit der Richtlinie:
/**
*
*/
var classificationViewModule = angular.module('ald.classificationview',[]);
classificationViewModule.factory('classificationAPI',function(){
return {
getClassification:function($http, artifactId){
//TODO add URL
var url = "/Classification/getInfo?artifactId="+artifactId
return $http({
method: 'GET',
url: url
});
}
};
});
/*classificationViewModule.controller('testclassification',['$scope','$http',function($scope,$http){
$http.get("/Classification/getInfo?artifactId=6450").success(function(data){
$scope.classification = data;
})
}]);*/
classificationViewModule.directive('classificationview', function () {
return {
restrict: 'EA',
scope: {},
replace: true,
link: function ($scope, element, attributes) {
},
controller: function ($scope, $http, classificationAPI) {
classificationAPI.getClassification($http).success(function(data,status){
//TODO
$scope.artifactClassification = data;
}).error(function(data,status){
if (404==status){
alert("no text");
} else {
alert("bad stuff!");
}
});
},
//TODO add template url
templateUrl: "classificationviewer.html"
};
});
Den Vorlage Datei :
<div>
Hello world
{{artifactClassification}}
</div>
Den index.html Datei :
<
!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="layout" content="main"/>
<title>Classification Toolkit for Grails</title>
<script type="text/javascript">
angular.module('classtoolkitApp', [
'ald.classificationview'
]).controller('index', function ($scope) {
});
</script>
<asset:javascript src="ald/classificationview/classificationview.js"/>
</head>
<body >
<div ng-app="classtoolkitApp" ng-controller="index">
classification
<classificationview artifactId=6450/>
</div>
</body>
</html>
- Wahr, dass, beachten Sie, dass die templateUrl muss ein Pfad von der Wurzel Ihrer app.
- Nicht sicher, ob ich Folgen. Also die Vorlage ist in einem plugin, das verwendet wird, durch dieses Projekt.
- Ja, und beachten Sie, dass eckig sucht .html-Datei im Stammverzeichnis der webapp. Wenn Sie das plugin in einen Ordner irgendwo müssen Sie den gesamten Pfad von der Wurzel. Sagen /common/directives/someplugin/classificationviewer.html.
- Sie können auch das template von html in ein
ng-template
script-Tags mit der gleichen ID wie templateUrl. Wenn eckige findet es dort, es wird nicht ajax-request, um es zu bekommen - Ich würde das tun, aber ich bin nicht sicher, warum dies nicht funktionieren. Es funktionierte bei allen anderen Vorlagen, wie die Hierarchie/Dokument...
- Hast du es geschafft dieses problem zu lösen?
- nun wollte ich, da war es mehr als vor einem Jahr. Leider ich kann mich nicht erinnern, etwas über es jetzt
Du musst angemeldet sein, um einen Kommentar abzugeben.
Das problem ist, dass aus irgendeinem Grund der http-server nicht finden kann-Vorlage in Ihrem Arbeitsverzeichnis.
Können Sie es testen direkt im browser:
Und Sie sollten sehen
404 NOT FOUND
, was bedeutet, dass dieses template nicht gefunden wurde.Sagte Sie, dass Sie Ihre anderen Vorlagen sind toll arbeiten, so können Sie finden, wo Sie sich befinden, in Ihrem Arbeitsverzeichnis, und platzieren Sie diese in der gleichen Lage.
Folgenden sind die mögliche Lösung
1. überprüfen Sie den korrekten Pfad. Überprüfen Sie die Netzwerk-Registerkarte, ob Sie sind immer 200 OK
2. überprüfen Sie in der Registerkarte Quellen für die html-Datei
3. wenn Sie mit webpack ändern Sie dann die templateUrl zur Vorlage und verwenden erfordern um die Datei zu laden
wenn Sie mit Ihrem lokalen system direkt, dann funktioniert das nicht. verwenden Sie die Winkel-server die Datei laden
Schritt um Ihr problem zu lösen
1.öffnen Sie die cmd-Eingabeaufforderung und geben Sie npm install-g-http-server
2. In der cmd geben Sie " cd (Ihre Projekt-Ordner-Pfad) wie z.B.: cd desktop/app/Training dann
3. jetzt in Ihrem Ordner Pfad geben Sie http-server -o dieser Befehl dienen Ihrer lokalen Seite, auf der Winkel-server auf Ihrem lokalen meachine