Javascript Angular JS 错误:$compile:tpload: 无法加载模板:

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/25852115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-22 21:57:22  来源:igfitidea点击:

Angular JS Error: $compile:tpload: Failed to load template:

javascriptangularjstemplates

提问by krs

So I am trying to load the template in my directive. This directive is reusable. But I am failing to load the template. I have had other templates which are loaded and work properly.

所以我试图在我的指令中加载模板。该指令是可重用的。但我无法加载模板。我已经加载了其他模板并正常工作。

The errorthat I am getting is :

我得到的错误是:

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

The javascriptfile containing the directive:

包含指令的javascript文件:

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

The templatefile :

模板文件:

<div>

Hello world

{{artifactClassification}}


</div>

The index.htmlfile :

index.html的文件:

<

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

回答by alexey

The problem is that for some reason your http server can't find template in your working directory.

问题是由于某种原因,您的 http 服务器无法在您的工作目录中找到模板。

You can test it directly in browser:

可以直接在浏览器中测试:

<url>/classificationviewer.html

And you should see 404 NOT FOUND, which means that this template was not found.

你应该看到404 NOT FOUND,这意味着没有找到这个模板。

You said, that your other templates are working great, so you can find where are they located in your working directory and place this one at the same location.

您说过,您的其他模板运行良好,因此您可以找到它们在您的工作目录中的位置并将其放置在同一位置。

回答by Arun Giri

Following are the possible solution 1. check for the correct path. Check the network tab whether you are getting 200 OK 2. check in the sources tab for the html file 3. if you are using webpack then change the templateUrl to template and use requireto load the file

以下是可能的解决方案 1. 检查正确的路径。检查网络选项卡是否获得 200 OK 2. 检查 html 文件的源选项卡 3. 如果您使用的是 webpack,则将 templateUrl 更改为 template 并使用require加载文件

回答by utkarsh singh

if you are using your local system directly then does not work. use the angular server load the file step to solve your problem 1.open cmd prompt and type npm install -g http-server 2. In cmd type cd (your project folder path) like: cd desktop/app/workout then 3. now in your folder path type http-server -o this command serve your local page on the angular server on your local meachine

如果您直接使用本地系统,则不起作用。使用角度服务器加载文件步骤来解决您的问题 1.打开 cmd 提示符并键入 npm install -g http-server 2. 在 cmd 中键入 cd (您的项目文件夹路径),例如:cd desktop/app/workout then 3. now在您的文件夹路径中键入 http-server -o 此命令在本地机器上的角度服务器上为您的本地页面提供服务