Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AngularJS Basics (1.x) Improving Our Todo App Create a Custom Directive For “todos”

Marc Murray
Marc Murray
4,618 Points
Posted by Marc Murray
Marc Murray
4,618 Points

Can't render out the template todo.html, think the directive can't find the template.

Hi there! This course is going fine for me so far but I have just run into an issue with using a custom directive to render the todo.html template. Can't seem to get it working!

I've tried re-typing the code a few times, and changed around the path to the template in case its relative or something but it's just not working for me.

The Scripts are all loading, so I think the directive is having trouble finding the template, but I've tried a few different paths etc to no avail.

Can anyone see where I'm going wrong?

todo directive :

    angular.module('todoListApp')
    .directive('todos', function() {
    return {
        templateUrl: 'templates/todos.html',
        controller: 'mainCtrl',
        replace: true
    };
    });

Section of index.html where I call the directive:

 <div class="container">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <todos></todos>
                </div>
            </div>
        </div>
    </div>

todo template

    <div class="card">
    <div class="list">
        <div class="card-title item">
            <h3>Today</h3>
            <h4>{{date | date:'dd/MMM/yyyy'}}</h4>
            <div class="add">
                <a href="" ng-click="addTodo()">Add a New Task</a>
            </div>
        </div>
        <ul>
            <li class="{{todo.category}} item" ng-repeat="todo in todos | filter: {'date' : 'today'} | orderBy: 'completed'" ng-init="todo.completed = false">
                <input ng-model="todo.completed" type="checkbox" />
                <span ng-click="todo.completed = !todo.completed"></span>
                <label ng-hide="editing" ng-click="editing = !editing" ng-class="{'editing-item':editing, 'completed':todo.completed}">{{todo.name}}</label>
                <input ng-blur="editing = false;" ng-show="editing" ng-model="todo.name" class="editing-label" type="text">
                <div class="actions">
                    <a class="{{todo.category}}-action" ng-click="editing = !editing" href="">Edit</a>
                    <a class="{{todo.category}}-action" href="" ng-click="helloConsole()">Save</a>
                    <a class="{{todo.category}}-action" href="" class="delete" ng-click="deleteTodo(todo, $index)">Delete</a>
                </div>
            </li>
        </ul>
    </div>
</div>
Marc Murray
Marc Murray
4,618 Points
Marc Murray
Marc Murray
4,618 Points

I can provide a screenshot of my folder structure if neccaserry.

2 Answers

Arturo Alviar
Arturo Alviar
15,739 Points
Arturo Alviar
Arturo Alviar
15,739 Points

Hi Marc,
Your todo directive is fine. You probably have this but in your index.html file make sure the body or main wrapper has

ng-app="todoListApp"

Also make sure you are including the script tag

<script src="scripts/directives/todos.js" type="text/javascript"></script> 
<!--or whatever path-->
Marc Murray
Marc Murray
4,618 Points
Marc Murray
Marc Murray
4,618 Points

Hi Arturo, thanks for the response! I am declaring the app, and linking to the script as far as I can tell, this doesn't seem to be the issue! The entire repo can be found here if that would be helpful at all: https://gitlab.com/MarcMurray92/too-doo/tree/661986d065bdd4bb0926726d303ad9dc51e66079

Arturo Alviar
Arturo Alviar
15,739 Points
Arturo Alviar
Arturo Alviar
15,739 Points

It seems you are missing

$scope.todos = [];

in you main.js file so maybe that?. Although you would get errors in the console for that.

Marc Murray
Marc Murray
4,618 Points
Marc Murray
Marc Murray
4,618 Points

Hmm I added that and it didn't make a difference wither, thanks for checking it out though!

Arturo Alviar
Arturo Alviar
15,739 Points
Arturo Alviar
Arturo Alviar
15,739 Points

I downloaded your repo and used the angular cdn rather than the vendor.js. I would also adjust the margin-left of the container that has the todo items or make the page into two columns since the todo labels are hidden. So again here is what I did with the files I downloaded

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<!-- other scripts go here -->

//todo.js
angular.module('todoListApp')
 .directive('todos', function() {
   return {
    templateUrl: 'templates/todos.html',
    controller: 'mainCtrl',
    replace: true //added this line
    };
});

//main.js
angular.module("todoListApp")
 .controller('mainCtrl', function($scope, dataService) {
  $scope.todos = []; //added this line
  $scope.addTodo = function() {

Let me know if this worked for you too.

Marc Murray
Marc Murray
4,618 Points
Marc Murray
Marc Murray
4,618 Points

Hi Arturo, that worked perfectly thanks a million! Much appreciated.

Arturo Alviar
Arturo Alviar
15,739 Points
Arturo Alviar
Arturo Alviar
15,739 Points

Awesome, glad we figured something out!

Katie Saldivar
Katie Saldivar
383 Points
Katie Saldivar
Katie Saldivar
383 Points

I'm having the same problem and I tried all of your suggestions but it still won't work.