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

Posted by Angela Riggs
Angela Riggs
2,539 Points

Digest Loop Not Updating Bio Code

My app.js code isn't working to update the user.bio info on the right side of the preview screen.

I updated my index.html file to include the ng-model text that Alex added:

<html ng-app="treehouseCourse">
  <head>
    <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="font-awesome.css">
    <style type="text/css">
      .main, .debug {
        width: 48%;
      }

      .main {
        float: left;
      }

      .debug {
        float: right;
      }

      .fields label {
        display: block;
        margin-bottom: 1.5em;
        font-weight: bold;
      }

      .fields label input, .fields label select {
        font-weight: normal;
        margin-left: 1em;
      }

      .textarea {
        width: 100%;
        min-height: 250px;
      }
    </style>
  </head>
  <body ng-controller="stageTwoCtrl">
    <div class="main">
      <div class="textarea" ng-model="user.bio" hallo></div>
    </div>
    <div class="debug">
      <pre ng-bind="user | json">
      </pre>
    </div>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script type="text/javascript" src="//rangy.googlecode.com/svn/trunk/currentrelease/rangy-core.js"></script>
    <script type="text/javascript" src="hallo.js"></script>
    <script type="text/javascript" src="app.js"></script>
  </body>
</html>

I also followed along and went back to recheck the code we added in app.js: 

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, and hemp&mdash;yet all these ran into each other in the one concrete hull, which shot on its way, both balanced and directed by the long central keel; even so, all the individualities of the crew, this man's valor, that man's fear; guilt and guiltiness, all varieties were welded into oneness, and were all directed to 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 = $elements.hallo('getContents');
          ngModelCtrl.$setViewValue(contents);
          $scope.$digest();
        });

      }
    }
  });

As far as I can tell, my code is correct according to the video. The text in my Hallo editor changes (bold, italic, etc), but the code to the right of it is not reflecting the changes.

1 Answer

Warren On Show
Warren On Show
3,453 Points
Warren On Show
Warren On Show
3,453 Points

Hi. I don't know if you're still looking for the solution for this, but on line 28 of your app.js file, you've written $elements instead of $element. That should fix it.