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，data，chrome，chrome -extension，https。
angular.js：14800错误：[$ compile：tpload] http://errors.angularjs.org/1.6.9/ $ compile / tpload？p0 = todo.tpl.html＆amp; p1 = -1＆amp; p2 =

有人可以提供阅读链接和正确的文档链接以了解有关模板的更多信息吗？

Answer 1

确保网络标签上没有任何错误，请检查模板的路径。

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

效果很好 DEMO 。

Answer 2

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

正如您所建议的那样，我搜索了我的网络代码，但却找不到“todo.tpl.html”。虽然路径是正确的，但文件丢失了。这是因为我提到的第一个错误，即跨域错误＆＃39;。

第一个错误的解决方案是：将文件存储在任何Web服务器＆＃39; WAMP，XAMP或我的案例AMPPS（用于macOS）中。所以我将所有3个文件（index.html，script.js＆amp; todo.tpl.html）放在AMPSS文件夹中。

现在，我在浏览器网址中访问我的代码已更改为＆＃39; file：///（path）＆＃39;到＆＃39; http://localhost/(filename)＆＃39;。

这适合我。

我从post获取的建议。

Angular JS模板： - 文件'todo.tpl.html'这是一个模板文件不加载？我该如何解决？

2 个答案: