Angular JS Templates:- the file 'todo.tpl.html' which is a template file doesn't load? How do I fix this?
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}
];
});
In the above snippet, I created a custom directive called 'my-todo', now I created a template in a different file named 'todo.tpl.html'. When I tried to load the file I get the following errors:-
-
Failed to load file:///Users/sumo/Desktop/Tejas/GitHub/furry-happiness/customDirective/todo.tpl.html: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
-
angular.js:14800 Error: [$compile:tpload] http://errors.angularjs.org/1.6.9/ $compile/tpload?p0=todo.tpl.html&p1=-1&p2=
Can someone provide the reading links and proper documentation links to know more about templates can be helpful?
2 answers
solution1
0 2018-04-12 03:38:39
Make sure you do not have any errors on the network tab, check the path of your template.
app.directive('myTodo', function() {
return {
restrict: 'EA',
templateUrl: 'todo.tpl.html', //THIS PATH
scope: {
list: '=',
title: '@'
}
};
})
it works fine DEMO .
solution2
0 ACCPTED 2018-04-12 04:10:42
Thank you @Sajeetharan for the suggestion. But I think I have solved this problem.
As you had suggested I searched my network tag, only to find the 'todo.tpl.html' file was missing from there, though the path was correct. This was happening because of the first error which I mentioned ie, 'the cross-domain error'.
The solution for the first error was: to store the file in any of the web-servers 'WAMP, XAMP or in my case AMPPS(for macOS)'. So I placed all the 3 file's (index.html, script.js & todo.tpl.html) inside the AMPSS folder.
Now the accessing of my code in the browser URL changed to from 'file:/// (path)' to ' http://localhost/(filename) '.
This Worked for me.
A suggestion I took from this post .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.