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

Shin And
Shin And
8,924 Points
Posted by Shin And
Shin And
8,924 Points

How can I Connect the Hallo Directive within my Angular JS ng-model Part 2 Hallo Project App

I followed the code strictly, and reviewed previous post, however the bio info will not display in the viewport...the app does not pull in the text. What am I missing?

mikes02
mikes02
Courses Plus Student 16,968 Points

Hi Shinny,

Please post your code when you have an opportunity, it will help other forum members troubleshoot the issue, without the code it's too difficult to determine what could be going wrong. If you are uncertain on how to share code you can refer to the Markdown Cheatsheet for assistance, it is essentially wrapping your code in (```) at the beginning and end without the parenthesis, though.

Shin And
Shin And
8,924 Points
Shin And
Shin And
8,924 Points 
angular.module('treehouseCourse', [])
  .controller('stageTwoCtrl', function ($scope) {
    $scope.user = {
      name: "world",
      bio: "<p>They were one man, not thirty. For as the one ship that held them all; though it was put together of all contrasting things&mdash;oak, and maple, and pine wood; iron, and pitch, that fatal goal which Ahab their one lord and keel did point to.</p>"
    };
  })
  .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();
      } 

        }
  });
mikes02
mikes02
Courses Plus Student 16,968 Points

Is there any additional code for the front end where you are attempting to display?

Shin And
Shin And
8,924 Points
Shin And
Shin And
8,924 Points

Mike

That's the section/portion of code that caused the App to fail. I can post all of the supporting code if you believe it can be helpful.. please advise..

thanks again for your help..

mikes02
mikes02
Courses Plus Student 16,968 Points

I think you should, it can help others more thoroughly test for the issue as well that way.

Shin And
Shin And
8,924 Points
Shin And
Shin And
8,924 Points

Mike

I'm at work..I can post all code in 3hrs

2 Answers

Harvey Ball
Harvey Ball
8,546 Points
Harvey Ball
Harvey Ball
8,546 Points

I don't how if you have sorted this already but I think I have found your error.

Your code is:

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

Whereas it should be:

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

Missing the parenthesis after the final curly brace is breaking your code!

Hope this solves your issue

Harvey

Laura Kirby
Laura Kirby
1,814 Points
Laura Kirby
Laura Kirby
1,814 Points

I found this tutorial to be confusing because quite a few additional files are added to the solution, which one will only know about after downloading the zip and searching through the various files.

If you only add the code displayed during the tutorial (i.e. you're coding along), you will run into errors.

If you would like to see the full working version, I suggest you download the zip, go to 'stage 2' and run simple python server (more details on setting this up below).

How to: To see this demo working, you will need to open the main html file using a server, you can do this locally on your computer. I am using a Mac.

  1. Rename wysiwyg.html to index.html so your python server is not confused.
  2. From terminal, cd into your project folder/directory.
  3. While still in terminal, type python -m SimpleHTTPServer
    • You should see a message that states, "Serving HTTP on 0.0.0.0 port 8000 ...".
  4. Open your browser and write, http://localhost:8000/ in the url bar to view the your index.html file.

I tried to add the hallo cdn to my index.html instead of including the additional js files, this was not a viable solution.