1

I am building a Rails app but using AngularJS for bits of the front end.

Is it possible to store {{expressions}} as a $scope.variable value?

Code:

Here is the angular controller

// I am pulling data from the rails controller via the gon gem. $scope.entertainmentTemplate = gon.active_entertainment_template.description;

Which translates to:

$scope.description = "{{productName}} is a great product and also has awesome {{additionalInfo}}. These are some more example words, blah blah..";

Defined variables in angular controller: $scope.productName = "Test product"; $scope.additionalInfo = "test additional information";

My question is how do I render the above $scope.description to the view so that it displays like so:

"Test product is a great product and also has awesome test additional information. These are some more example words, blah blah.."

Please let me know if any additional context is needed.

UPDATE 1:

Here is an image of the application to show context: Image to show context

zstrad44
  • 41
  • 5

3 Answers3

2

You can use a function to mimic a "computed" property like so:

    $scope.fullDescription = function () {
       return productName + " is a great product and also has awesome " +
              additionalInfo + ". These are some more example words, blah blah..";
    };

And you can bind to it just like a variable in your markup:

<div ng-bind="fullDescription()"></div>
Steve Danner
  • 21,818
  • 7
  • 41
  • 51
  • How does it know to recall the function when the variables change? – user7951676 Sep 13 '17 at 13:45
  • This answer has a good, thorough explanation of how Angular decides to rerun the function: https://stackoverflow.com/questions/30437563/angularjs-ng-bind-with-a-function#answer-30437972 – Steve Danner Sep 13 '17 at 13:58
  • Thank you, I understand now – user7951676 Sep 13 '17 at 14:07
  • @SteveDanner Thanks for replying. I did think about this approach and used it for other portions of the app. The only issue is, that there are many descriptions and the variables will be in different locations in each. So I need a way to render the expressions like I stated in the original question. I have thought about `$compile`, but am not quite sure how to go about that. – zstrad44 Sep 13 '17 at 15:54
1

you can use angular $parse using regular expression you can search for the variable and then parse it.

The example below it is not a 100% accurate but you will get the idea

Like:

$scope.description = "{{productName}} is a great product and also has
awesome {{additionalInfo}}. These are some more example words, blah 
blah..".replace(/{{(.*?)}}/g,
function(item,a){ var getter = $parse(a); return getter($scope); });

Now, I am just answering an option on how. However, I do not believe this is the optimal solution to the problem.

Dalorzo
  • 19,834
  • 7
  • 55
  • 102
1

I figured it out. The solution was $interpolate

Example:

//Assign the gon variable from the rails controller

$scope.entertainmentTemplate = gon.active_entertainment_template.description;

// Interpolate the variable with the controller $scope as the scope and 
assign it to the model you wish.

$scope.description = $interpolate($scope.entertainmentTemplate)($scope);

Make sure you add the $interpolate service to the controller like so:

var app = angular.module('myApp', []);
app.controller('listingFormCtrl',['$scope', '$interpolate', function($scope, $interpolate) {

}]);

This will replace all unrendered instance of {{expression variables}} in the assigned controller scope.

zstrad44
  • 41
  • 5