angular how to let html redner the scope variable as a string

Question

Say I have the following line in a controller hmmCtrl:

$rootScope.value = 1;
$scope.hmm = "{{$root.value}}"

And in html, if I have:

<section ng-controller="hmmCtrl">
 {{hmm}}
</section>

Currently it displays:

{{$root.value}}

but I actually want to see the value of $root.value:

In the long run I plan to put the $root.value in a json file that is going to be parsed by the hmmCtrl.

How can I make this happen?

From a quick look it seems You have a typo it should be $scope.hmm = $rootScope.value not root — Zabed Akbar
– Zabed Akbar, Commented Sep 30, 2016 at 21:56

Pankaj Parkar · Accepted Answer · 2016-10-01 11:19:28Z

1

So what you can do is, you can write a inside a controller which can return your interpolation expression evaluated value

Code

//inject `$interpolate` inside controller function before using it.
$scope.evaluateValue = function(expr){
   return $interpolate(expr)($scope);
}

Markup

<section ng-controller="hmmCtrl">
  {{evaluateValue(hmm)}}
</section>

Other way

<section ng-controller="hmmCtrl" ng-bind="evaluateValue(hmm)">
</section>

Demo Here

edited Oct 1, 2016 at 11:19

answered Sep 30, 2016 at 21:57

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

jamesdeath123 Over a year ago

hmm, this prints out evaluateValue(hmm) to me - I put the $scope.eveluateValue inside hmmCtrl.

jamesdeath123 Over a year ago

Hmm, the updated works as the value can be shown now, but the console gives error: Error: f is undefined h@localhost:81/js/angular_core/angular.min.v.1.4.5.js:94:218 $scope.evaluate@localhost:81/js/controllers/menu_controllers.js:11:11 where menu_controllers.js:11 is the line of return $interpolate(expr)($scope); any ideas?

Pankaj Parkar Over a year ago

Have yoi injected $interpolate service in controller?

jamesdeath123 Over a year ago

yes - the value is correctly interpolated; just with the f is undefined error.

Pankaj Parkar Over a year ago

Could you please create a plunkr?

|

Argee · Accepted Answer · 2016-10-01 11:27:46Z

0

Change your html-Code from

<section ng-controller="hmmCtrl">
    {{hmm}}
</section>

to

<section ng-controller="hmmCtrl">
    {{value}}
</section>

$scope inherites from $rootScope, meaning $scope also has the "value"-variable...

answered Oct 1, 2016 at 11:27

Argee

1,2341 gold badge12 silver badges23 bronze badges

2 Comments

jamesdeath123 Over a year ago

Although your answer is right that $scope inherits from $rootScope and it also have "value", it doesn't solve the problem of parsing "{{$root.value}}" or "{{$scope.value}}" properly, which is the real problem I tried to ask..

Argee Over a year ago

Oh yes, I didn't know where $root came from and misunderstood it as $rootScope. My bad^^

Collectives™ on Stack Overflow

angular how to let html redner the scope variable as a string

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related