Question

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

我得到的错误是：

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

包含指令的 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"
    };
});

模板文件：

<div>

Hello world

{{artifactClassification}}


</div>

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>

Answer 1

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

您可以直接在浏览器中测试它：

<url>/classificationviewer.html

您应该看到404 NOT FOUND，这意味着找不到此模板。

你说，你的其他模板工作得很好，所以你可以找到它们在工作目录中的位置并将它放在同一个位置。

Answer 2

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

Answer 3

如果您直接使用本地系统，则无法使用。使用角度服务器加载文件解决您的问题的步骤 1.打开cmd提示符并输入npm install -g http-server 2.在cmd中输入cd（您的项目文件夹路径），例如：cd desktop / app / workout然后 3.现在，在文件夹路径中，输入http-server -o，此命令将在本地机器上的Angular服务器上为您的本地页面提供服务

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

3 个答案: