web-dev-qa-db-fra.com

Angular Erreur JS: $ compile: tpload: Impossible de charger le modèle:

J'essaie donc de charger le modèle dans ma directive. Cette directive est réutilisable. Mais je ne parviens pas à charger le modèle. J'ai eu d'autres modèles qui sont chargés et fonctionnent correctement. 

Le erreur que je reçois est:

GET /ClassificationToolkitForGrails/classificationviewer.html 404 (Not Found) angular.js:8521
Error: [$compile:tpload] Failed to load template: classificationviewer.html

Le fichier javascript contenant la directive:

/**
 * 
 */
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"
    };
});

Le template file:

<div>

Hello world

{{artifactClassification}}


</div>

Le index.html fichier:

<

!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>
javascriptangularjstemplates
7
krs

Le problème est que, pour une raison quelconque, votre serveur http ne peut pas trouver de modèle dans votre répertoire de travail.

Vous pouvez le tester directement dans le navigateur:

<url>/classificationviewer.html

Et vous devriez voir 404 NOT FOUND, ce qui signifie que ce modèle n'a pas été trouvé.

Vous avez dit que vos autres modèles fonctionnent très bien. Vous pouvez donc trouver leur emplacement dans votre répertoire de travail et placer celui-ci au même endroit.

3
alexey

Voici la solution possible 1. vérifiez le chemin correct. Vérifiez l'onglet réseau si vous obtenez 200 OK 2. vérifiez dans l'onglet sources le fichier html 3. si vous utilisez webpack, remplacez templateUrl par template et utilisez require pour charger le fichier.

2
Arun Giri

si vous utilisez directement votre système local, cela ne fonctionne pas. utilisez le serveur angulaire chargez le fichier étape pour résoudre votre problème1.open cmd Invite et tapez npm install -g http-server 2. Dans cmd, tapez cd (votre chemin de dossier de projet), par exemple: cd desktop/app/workout, puis 3. maintenant dans votre chemin de dossier, tapez http-server -o cette commande sert votre page locale sur le serveur angulaire sur votre machine locale 

0
utkarsh singh