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

Michael Randall
PLUS
Michael Randall
Courses Plus Student 10,643 Points
Posted by Michael Randall
Michael Randall
Courses Plus Student 10,643 Points

ng-click not sending text to console.log when clicking the save link

I'm following along on my own machine and up to this point, everything had worked fine. But now when I click the save button, nothing is being logged to the console. I'm using Atom as the editor and my folder structure is this:

  DatesToRemember
  ----scripts
  ------app.js
  ----styles
  ------main.css
  ----vendor
  ------angular.js
  ----index.html

Here is my index.html code:

<!doctype html>
<html lang="en">
<head>
  <title>Dates To Remember App</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="datesToRememberApp">
  <h1>Dates to Remember</h1>

  <div ng-controller="mainCtrl" class="list">
    <input type="checkbox"/>
    <label class="editing-label">A sample date</label>
    <input class="editing-label" type="text"/>
  </div>
  <div class="actions">
    <a href="">edit</a>
    <a href="" ng-click="helloWorld()">save</a>
    <a href="" class="delete">delete</a>
  </div>

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

</body>
</html>

Here is my app.js code:

angular.module("datesToRememberApp", [])
.controller('mainCtrl', function($scope){
  $scope.helloWorld = function(){
    console.log("Hello from mainCtrl");
  };
});

1 Answer

Nate Conley
Nate Conley
16,191 Points
Nate Conley
Nate Conley
16,191 Points

Your ng-click is not within the mainCtrl. Try wrapping it in a div like this:

<div ng-controller="mainCtrl">
<div class="list">
    <input type="checkbox"/>
    <label class="editing-label">A sample date</label>
    <input class="editing-label" type="text"/>
  </div>
  <div class="actions">
    <a href="">edit</a>
    <a href="" ng-click="helloWorld()">save</a>
    <a href="" class="delete">delete</a>
  </div>
</div>
Michael Randall
Michael Randall
Courses Plus Student 10,643 Points
Michael Randall
Michael Randall
Courses Plus Student 10,643 Points

Hi Nate, that works. I could swear that in the video he added the ng-controller to the div with the class list. Anyway, it works. Thanks!