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
Marc Murray
4,618 PointsCan'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>
2 Answers
Arturo Alviar
15,739 PointsHi 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
4,618 PointsHi 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
15,739 PointsIt 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
4,618 PointsHmm I added that and it didn't make a difference wither, thanks for checking it out though!
Arturo Alviar
15,739 PointsI 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
4,618 PointsHi Arturo, that worked perfectly thanks a million! Much appreciated.
Arturo Alviar
15,739 PointsAwesome, glad we figured something out!
Katie Saldivar
383 PointsI'm having the same problem and I tried all of your suggestions but it still won't work.
Marc Murray
4,618 PointsMarc Murray
4,618 PointsI can provide a screenshot of my folder structure if neccaserry.