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 An Introduction to Two-Way Data Binding Two-Way Binding: ngModelCtrl

Posted by James Ferguson
James Ferguson
2,819 Points

Really struggling with this. any ideas guys?

Within the link function of myDirective, write a function that uses the ngModelCtrl to send all new values typed into the <input> to the console.log function.

app.js 
angular.module('myApp', [])
.controller('myController', function($scope) {
  $scope.user = {
    name: 'Alex'
  };
})
.directive('myDirective', function () {
  return {
    require: 'ngModel',
    priority: 1,
    link: function ($scope, $element, $attrs, ngModelCtrl) {

      ngModelCtrl.on('nameModified', function () {
        console.log($element.myController);
      }

    }
  }
});
index.html 
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>Angular.js</title>
  <script src="js/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="myController">

  <p>Hello {{user.name}}</p>
  <input type="text" ng-model="user.name" />
  <div my-directive ng-model="user.name"></div>

</body>
</html>

5 Answers

Thong Tran
Thong Tran
8,713 Points
Thong Tran
Thong Tran
8,713 Points

like this ngModelCtrl.$render = function() { console.log(ngModelCtrl.$viewValue);}

Mawel Mirabal
Mawel Mirabal
14,289 Points
Mawel Mirabal
Mawel Mirabal
14,289 Points

Should be something like this... 

    // YOUR CODE HERE
    ngModelCtrl.$render = function(){
    var contents = ngModelCtrl.$viewValue;
    console.log(contents);
james white
james white
78,399 Points
james white
james white
78,399 Points

Mawel, sorry...your code is not what the challenge wants..

Link to challenge: http://teamtreehouse.com/library/angularjs-2/an-introduction-to-twoway-data-binding/twoway-binding-ngmodelctrl

Daniel, Sorry, your post wasn't as helpful as helpful as Chris Upjohn's in this thread: https://teamtreehouse.com/forum/i-dont-understand-the-ngmodelctrl-and-directive-method-how-do-i-complete-this-code-challenge

Daniel Beal
Daniel Beal
6,136 Points
Daniel Beal
Daniel Beal
6,136 Points

Implement the ngModelCtrl.$render function and use the $viewValue variable to console.log

Ryan Codes
Ryan Codes
14,888 Points
Ryan Codes
Ryan Codes
14,888 Points

just got to this topic on angular js. answer would be

ngModelCtrl.$render = function() { var contents = ngModelCtrl.$viewValue; console.log('setContent', contents); }