Angular doesn't work

Question

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 :)

Answer 1 · 2015-04-06T16:42:26Z

April 6, 2015 4:42pm

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>
    </div>

Edit:

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) {
        $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();
        });
      }
    }
  });

Welcome to the Treehouse Community

Looking to learn something new?

Jonathan Grieve

Jonathan Grieve

Angular doesn't work

1 Answer

Marcus Parsons

Marcus Parsons

Jonathan Grieve

Jonathan Grieve

Marcus Parsons

Marcus Parsons

Jonathan Grieve

Jonathan Grieve

Marcus Parsons

Marcus Parsons

Jonathan Grieve

Jonathan Grieve

Marcus Parsons

Marcus Parsons