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


Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Angular doesn't work

So I tried to get back into Angular earlier today, but I feel like I'm kind of looking for a needle in a haystack and there is a JS error in my code that needs fixing first.

I get this in the console. Uncaught ReferenceError: ngModelCtrl is not defined rangy-core.js:11 'Range.detach' is now a no-op, as per DOM (http://dom.spec.whatwg.org/#dom-range-detach).

Now, I'm not sure how old precisely Angular is... after my time in Treehouse that's for sure but I heard talk that Angular has since upgraded it's version number. Does the code need to be updated to work? I know I've followed the videos and hot the 2 way data binding to work before but I'm baffled right now.

I have the following files in my project angular-ex.html app.js font-awesome.css hallo.js

and use

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script type="text/javascript" src="http://rangy.googlecode.com/svn/trunk/currentrelease/rangy-core.js"></script>

For script libraries if it helps.

http://www.jonniegrieve.co.uk/jg-lab.co.uk/treehouse/angular/example/angular-ex.html thanks :)

1 Answer

Hey Jonathan,

I looked at your source code, and you're missing the "ng-model" from your textarea and the "hallo" attribute.

    <div class="main">
      <div class="textarea" ng-model="user.bio" hallo></div>


Also, in your app.js file, the ngModelCtrl.$render function and the $element.on event handler should reside within the directive like so that these events can fire off successfully, because otherwise $element would be undefined:

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) {
          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');
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Thanks Marcus, I'll look forward to look at these later :)

It has been a while since I had a proper go at Angular so if I built this from a video as I suspect I did I must have skipped that bit :p

Well, I know it works, because I tested the newly updated code with the code from your website. The textarea is binded to the data, as it should have been; however, the hallo editor does not seem to work, however. We have the exact same code linked to the exact same resources, and mine does not work either. I'm assuming it must have something to do with one of those scripts.

That bit wasn't in the video. It comes from actually working with Angular and playing around with the code. I don't have to have 20, 30, 40, 50, etc. thousand points to know what I'm talking about. :)

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Haha well I've made no secret of the fact I've found Angular hard going so far but it's on my list of things to master for my portfolio. If it means going back to the videos one more time so be it :)

Ah, but you seem to think that the amount of points you have on this website directly correlates to the level of knowledge and expertise you have in a certain area, and that is clearly not the case. I just don't appreciate the snarky remark about building it from a video and missing the information I presented to you. I did not say it came from the videos here on Treehouse. Believe it or not, there are other resources out there for learning information, my friend.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Marcus,

You seem to have misunderstood me! I know as well as anyone that Treehouse videos alone are not the be all and end all for teaching you everything you need to know!

I meant no arrogance or disrespect or sense of entitlement about Treehouse education.

I thought you said you built the fix from the code in my link! I was just talking about my own experience of the course as I've taken it so far. Irregardless I appreciate you taking the time to answer so thanks!

All that said, Treehouse has undoubtedly improved my knowledge in the past year so that's great :-)

Ah, I offer apologies for my comments, as well. I misunderstood what you were trying to say. It has helped me, too, and I love Treehouse. I stay on, paying for my membership to basically help others and for the career placement program. Again, sorry for this misunderstanding.