CODEWITHSUNDEEP
angularjs
basickarl
basickarl

Reputation: 40444

ng-bind not showing scope variables {{ }}

test.html (my template):

<span data-ng-bind="emailSent.info"></span>

js:

$scope.resetPasswordEmail = "[email protected]";
// info is taken from a database with different languages
$scope.emailSent = { 
    info: getInfoFromDatabase() // returns: 'Confirmation email sent to {{resetPasswordEmail}}, check your email.'
};
angular.element(document.body).append($compile($templateCache.get('test.html'))($scope));

However this results in the following in the span on the page:

Confirmation email sent to {{resetPasswordEmail}}, check your email.

I'm attempting to do "nested" scope variables. Do I have to re-compile the compiled template again. Or is there a proper angularjs way of achieving this.

Upvotes: 1

Views: 489

Answers (1)

Shomz
Shomz

Reputation: 37691

Based on your updated question, I see why you're doing this.

The key to do it is to use $interpolate: 

angular.module('app', []).
controller('Ctrl', function($scope, $interpolate, $compile){
  $scope.resetPasswordEmail = "[email protected]";
  $scope.emailSent = {
    info: $interpolate(getInfoFromDatabase())($scope)
  };
  
  function getInfoFromDatabase(){
    return 'Confirmation email sent to {{resetPasswordEmail}}, check your email.'
  }
  angular.element(document.body).append($compile('<span data-ng-bind="emailSent.info"></span>')($scope));
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl"></div>

Upvotes: 1

Related Questions