AngularJS $scope is undefined when a function is called from HTML page not .js file

Question

I have this: $scope.products;
I set the value on it like this: $scope.products = plans; where plans is the result I get back from a call. If I debug, here, I have $scope and $scope.products in the debugger.

Example:

But then I do this from my .html:

<td>
  <span data-i18n="psngr.billing.pay.overview.total">
    Total
  </span> 
  <label class="bold">
    <span ng-bind-html="prices.currency"></span>
    {{ roundPrice(products[0].price.val)}}
  </label>
  <span id="vat" ng-show="prices.currency_code === 'EUR'"> 
    (+ 
    <span ng-bind-html="prices.currency"></span>
    {{products[0].vat}} 
    <span data-i18n="psngr.billing.vat"></span>
    )
  </span>
</td>

Basically calling the roundPrice method from my .js file, which does this:

$scope.roundPrice = function(price) {
  if (!price) {
    return 0;
  }
  // potentially round the price
  if (price % 1 === 0) {
    return price.toFixed(0);
  }
  return price.toFixed(2);
};

But here my scope is undefined, and also price, cause of this. Why?

Example:

Not undefined, not available = not in current context. I.e. add console.log($scope) and you may see it or you can inspect closure section in dev console. — Petr Averyanov, Jul 16 '18 at 13:23
I tried putting console.log in the {{ }} of the .html file, but nothing is shown. — rosu alin, Jul 16 '18 at 13:24
@PetrAveryanov I added the console.log in my roundPrice() NOT the html and then this happened: https://s3.amazonaws.com/uploads.hipchat.com/39260/829560/XAGvZko20EsPv1n/upload.png — rosu alin, Jul 16 '18 at 13:29
That means that the scope exists there? Then what is wrong with my method , why does calling from the html not give me an correct value — rosu alin, Jul 16 '18 at 13:29
You need to pass just `price` i.e. `roundPrice(products[0].price)` as `products[0]` have `price` having primitive value — Satpal, Jul 16 '18 at 13:37
@Satpal thanks a lot, your comment made me figure out my issue — rosu alin, Jul 16 '18 at 14:01

score 1 · Accepted Answer · answered Jul 16 '18 at 14:01

After looking over the response that we get from the server, I understood better what the issue was: I was getting the price as a integer. so then of course price.val would get underfined. Which means it now works, after I changed the code to this:

roundPrice(products[0].price)}}

AngularJS $scope is undefined when a function is called from HTML page not .js file

1 Answers1