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”

Posted by Ana Weller
Ana Weller
9,310 Points

Uncaught ReferenceError: Invalid left-hand side in assignment

I'm getting this error and the todos wont render. The error points to line 30 in main.js

dataService.saveTodos(ng-model="todo.name");

Here is the entire main.js file:

'use strict';

angular.module('todoListApp')
.controller('mainCtrl', function($scope, dataService) {
  $scope.todos = []; //added this line
  $scope.addTodo = function() {
    var todo = {name: "This is a new todo."};
    $scope.todos.push(todo);
  };

  $scope.learningNgChange = function() {
    console.log("An input has changed");
  };

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

  $scope.deleteTodo = function(todo, $index) {
    dataService.deleteTodo(todo);
    $scope.todos.splice($index, 1);
  };

  $scope.saveTodos = function(todo) {
    var filteredTodos = $scope.todos.filter(function(todo) {
      if(todo.edited) {
        return todo;
      };
    })
    dataService.saveTodos(ng-model="todo.name");
  };

})

Here is my todos.js file:

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

And my todos.html file:

  <div class="list">
      <div class="add">
    <a href="" ng-click="addTodo()">+ Add a new task</a></div>    
      <div class="item" ng-class="{'editing-item': editing, 'edited': todo.edited}" ng-repeat="todo in todos">
       <input ng-model="todo.completed" type="checkbox" />
        <span ng-click="todo.completed = !todo.completed; todo.edited = true"></span>
      <label ng-hide="editing" 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="saveTodos(todo)">save</a>
        <a href="" ng-click="deleteTodo(todo, $index)" class="Delete">delete</a>
      </div>
    </div>
  </div>

And finally my index.html file:

<!doctype html>
<html lang="en">
<head>
  <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">
  <h1 ng-click="helloWorld()"> My TODOs</h1>
<todos></todos>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script src="scripts/app.js" type="text/javascript"></script>
  <script src="scripts/controllers/main.js" type="text/javascript"></script>
  <script src="scripts/services/data.js" type="text/javascript"></script>
  <script src="scripts/directives/todos.js" type="text/javascript"></script>
</body>
</html>

Any suggestions for my code?

Thanks :)

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

:point_right: It looks like you mixed in some stray HTML code as your argument.

The final workspace code has that line written this way:

    dataService.saveTodos(filteredTodos);