Angular JS模板：-无法加载模板文件“ todo.tpl.html”吗？我该如何解决？

Question

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Creating Custom Directives</title>
    </head>
    <body ng-app="myApp">
        <div ng-controller="main">
            <my-todo list="todo" title="Angular To-do"></my-todo>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

todo.tpl.html

<h1>{{title}}</h1>
<div ng-repeat="todo in list">
    <input type="checkbox" ng-model="todo.completed"> {{ todo.name }}
</div>

script.js

var app = angular.module('myApp', []);
app.directive('myTodo', function() {
    return {
        restrict: 'EA',
        templateUrl: 'todo.tpl.html',
        scope: {
            list: '=',
            title: '@'
        }
    };
});

app.controller('main', function($scope){
    $scope.todo = [
      {name: 'Create a custom directive', completed: true},
      {name: 'Learn about restrict', completed: true},
      {name: 'Master scopes', completed: false}
    ];
});

在上面的代码片段中，我创建了一个名为“ my-todo”的自定义指令，现在在另一个名为“ todo.tpl.html”的文件中创建了一个模板。 当我尝试加载文件时，出现以下错误：

无法加载文件：///Users/sumo/Desktop/Tejas/GitHub/furry-happiness/customDirective/todo.tpl.html：仅协议方案支持跨源请求：http，数据，chrome，chrome扩展名， https。
angular.js：14800错误：[$ compile：tpload] http://errors.angularjs.org/1.6.9/ $ compile / tpload？p0 = todo.tpl.html＆p1 = -1＆p2 =

有人可以提供阅读链接和适当的文档链接来帮助您进一步了解模板吗？

Answer 1

确保在“网络”标签上没有任何错误，然后检查模板的路径。

app.directive('myTodo', function() {
    return {
        restrict: 'EA',
        templateUrl: 'todo.tpl.html', //THIS PATH
        scope: {
            list: '=',
            title: '@'
        }
    };
})

它可以正常演示。

Answer 2

谢谢@Sajeetharan的建议。 但是我想我已经解决了这个问题。

正如您所建议的那样，我搜索了网络标签，但发现路径正确，但发现那里缺少“ todo.tpl.html”文件。 发生这种情况是由于我提到的第一个错误，即“跨域错误”。

第一个错误的解决方案是：将文件存储在任何Web服务器“ WAMP，XAMP或我的AMPPS（对于macOS）”中。 因此，我将所有3个文件（index.html，script.js和todo.tpl.html）放在AMPSS文件夹中。

现在，我在浏览器URL中对代码的访问从'file：///（path）'更改为' http：// localhost /（filename） '。

这为我工作。

我从这篇文章中得到了一个建议。

Angular JS模板：-无法加载模板文件“ todo.tpl.html”吗？我该如何解决？

问题描述

2 个解决方案

解决方案1
0 2018-04-12 03:38:39

解决方案2
0 已采纳 2018-04-12 04:10:42

Angular JS模板：-无法加载模板文件“ todo.tpl.html”吗？ 我该如何解决？

问题描述

2 个解决方案

解决方案1 0 2018-04-12 03:38:39

解决方案2 0 已采纳 2018-04-12 04:10:42

Angular JS模板：-无法加载模板文件“ todo.tpl.html”吗？我该如何解决？

解决方案1
0 2018-04-12 03:38:39

解决方案2
0 已采纳 2018-04-12 04:10:42