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 Looking at ng-model: Part 2

Marc-Oliver Gern
Marc-Oliver Gern
8,747 Points
Posted by Marc-Oliver Gern
Marc-Oliver Gern
8,747 Points

I followed the code strictly, but somehow, the app does not pull in the text. Am I missing something?

Would need a file to validate/compare my code.

1 Answer

David Mittelberg
David Mittelberg
2,585 Points
David Mittelberg
David Mittelberg
2,585 Points

Hey Marc,

You should move your ngModeCtrl.$render function and your $element.on function to be placed on the lines that occur immediately following the .directive for 'hallo'. 

.directive('hallo', function () {
    return {
      require: 'ngModel',
      link: function ($scope, $element, $attrs, ngModelCtrl) {
        $element.hallo({
          plugins: {
            'halloformat': {},
            'halloblock': {},
            'hallojustify': {},
            'hallolists': {},
            'halloreundo': {}
          }
        });

        ngModelCtrl.$render = function () {
          var contents = ngModelCtrl.$viewValue;
          $element.hallo('setContents', contents);
        }

        $element.on('hallomodified', function () {
          var contents = $element.hallo('getContents');
          ngModelCtrl.$setViewValue(contents);
          $scope.$digest();
        });

        }
    }
});

It is likely that you have your $render and .on functions placed outside of your directive like so:

  .directive('hallo', function () {
    return {
      require: 'ngModel',
      link: function ($scope, $element, $attrs, ngModelCtrl) {
        $element.hallo({
          plugins: {
            'halloformat': {},
            'halloblock': {},
            'hallojustify': {},
            'hallolists': {},
            'halloreundo': {}
          }
        });

        }
    }
});

ngModelCtrl.$render = function () {
  var contents = ngModelCtrl.$viewValue;
  $element.hallo('setContents', contents);
}

$element.on('hallomodified', function () {
  var contents = $element.hallo('getContents');
  ngModelCtrl.$setViewValue(contents);
  $scope.$digest();
});

The reason why the first example works vs. the second example is due to ngModelCtrl.$render and $element.on functions being declared outside of the angular.module in the second example. The functions cannot properly call any of your data, or the hallo directive because they are outside of the scope of the treehouseCourse module.

Kamal Chaneman
Kamal Chaneman
6,546 Points

I follow your first code above but still didn't show nothing :( I haven no idea what I'm missing here

David Mittelberg
David Mittelberg
2,585 Points
David Mittelberg
David Mittelberg
2,585 Points

Hey Kamal,

That is odd, could you please send me reply with your markup and javascript, so I can take a quick look at it?

Thanks!

Kamal Chaneman
Kamal Chaneman
6,546 Points

my bad, it's works like charm!! I misstype ng-model in HTML