0

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

  1. 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.

  2. 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?

GYaN
  • 2,327
  • 4
  • 19
  • 39
T J
  • 43
  • 6

2 Answers2

0

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.

Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
0

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 i.e, '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.

T J
  • 43
  • 6