Cathal
Cathal

Reputation: 1790

ng-book examples not working as expected

I'm currently reading through ng-book for angular js and have come accross two example pieces of code.

The first deals with the $parse service and can be found here: http://jsbin.com/UWuLALOf/1/edit

The second deals with $interpolate and can be found here: http://jsbin.com/oDeFuCAW/1/edit

Neither of these are working as expected (I think). They should be updating the view live. I've tried creating the first example locally but I get the same result. I thought maybe it was due to the version of angular but since it's using a specific version from the google api's this shouldn't be an issue. I'd like to figure out exactly what the parse and interpolate services are doing here so any ideas greatly appreciated.

Thanks

C

Upvotes: 0

Views: 776

Answers (3)

DStereo
DStereo

Reputation: 261

Instead of passing newVal param to $parse function you should pass an expression 'expr'

$scope.$watch('expr', function(newVal, oldVal, scope) {
    if (newVal !== oldVal) {
        // Let's set up our parseFun with the expression
        var parseFun = $parse('expr');
        // Get the value of the parsed expression, set it on the scope for output
        scope.parsedExpr = parseFun(scope);
    }
});

Upvotes: 1

alou
alou

Reputation: 1502

The code is working as expected but most likely you are not expecting what you should :)

Let's take one at a time:

  $scope.$watch('expr', function(newVal, oldVal, scope) {
    if (newVal !== oldVal) {
      // Let's set up our parseFun with the expression
      var parseFun = $parse(newVal);
      // Get the value of the parsed expression, set it on the scope for output
      scope.parsedExpr = parseFun(scope);
    }
  });

The $scope.$watch is setup and is monitoring changes tn the expr variable, which is tied with the input value via ng-model

If you change the expr value in the input, it is send to $parse for evaluation (1+1 should present 2, name should present {"name":"Ari Lerner"} in this case). $parse will convert a string expression to a function, so having this in mind you should know what to expect.

In the second example, when the body part is changed via the textarea, the template is rendered via $interpolate which will evaluate anything inside {{ }} and then render the html.

Upvotes: 0

Narek Mamikonyan
Narek Mamikonyan

Reputation: 4611

that's beacues the version of angular which you attached to site is not stable version , use this

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>

but nevertheless code are not working as expected

Upvotes: 0

Related Questions