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) Services in Angular Using Services To Save and Delete Data

seif dorani
seif dorani
2,684 Points

ng-click not firing message.. Please help.. attached my index and app.js for help

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <link href='styles/main.css' rel='stylesheet' type="text/css"> </head> <body ng-app="todoListApp">

<div ng-controller="mainCtrl" class="list"> <h1 ng-click="helloWorld()"> My List</h1> <div ng-class="{'editing-item': editing, 'edited': todo.edited}" ng-repeat="todo in todos"> <input ng-model ="todo.completed" type="checkbox" /> <label ng-hide="editing" class="editing-label" ng-click="helloWorld()">{{todo.name}}</label> <input ng-change="todo.edited = true" ng-blur="editing = false;" ng-show="editing" ng-model= "todo.name" class="editing-label" type="text" />

 <div class="actions">
 <a href="" ng-click=" editing = !editing">edit</a>
 <a href="" ng-click="helloConsole()">save</a>
 <a href="" ng-click="deleteTodo(todo)"
 class="delete">delete</a>
 </div>
</div>

{{todos}}

<script src="vendor/angular.js" type="text/javascript"></script> <script src="js/app.js" type="text/javascript"></script> </body> </html>


angular.module("todoListApp", [])

.controller('mainCtrl', function($scope, dataService) { $scope.learningNgChange = function() { console.log("An input changed!"); };

$scope.helloWorld = dataService.helloWorld;

dataService.getTodos(function(response) { console.log(response.data); $scope.todos = response.data; });

$scope.deleteTodo = function(todo) { dataService.deleteTodo(todo);

}; $scope.saveTodo = function(todo) { dataService.saveTodo(todo); }; }) .service('dataService', function($http) { this.helloWorld = function() { console.log("This is the data sercies's method!!"); };

this.getTodos = function(callback){ $http.get('mock/todos.json') .then(callback) };

this.deleteTodo = function(todo) { console.log("The " + todo.name + " todo has been deleted!") // other logic };

this.saveTodo = function(todo) { console.log("The " + todo.name + " todo has been saved!"); // other logic };

}); //method chaining, chain methods 1 after the other //define new service with service methods //1st parameter is the name of the service //2nd parameter is an annom callback function where we store our services methods //we will be using this keyword //this is special in js, context specific keyword that refers to specific things based on how its used //this refers to the service itself, when i attach the method helloConsole, it will be availbale of a method //console log.

//http provider, dependency injection at work again!

//create use of services method we created a function in the scope.

1 Answer

It's a bit hard to read but. Which message you are not getting? What is that helloConsole() function you call in your save-link's ng-click directive? Couldn't find that in your app.js