0

How to interpolate value inside interpolate?

I am using a file where I have written message string and using {{ vm.variable }} but I am unable to display the string with variable value on HTML.

input string ( in JS ): "Welcome {{name}} to the World."

desired output string (in HTML ): "Welcome John Smith to the world."

look my code below

(function() {

    'use strict';

    angular
        .module('app', [])
        .value('_MSG_', {
                "signup": "Welcome {{name}} to the World.",
                "login": "last login from {{location}}"
        }).controller('MessageController', function($scope, $parse, $interpolate, _MSG_){
            var vm = this;
            vm.name = "John Smith";
            vm.location = "India";
            vm.welcomeMessage = _MSG_.signup;
            //========trial 1 =======
            // vm.finalString = $interpolate(vm.welcomeMessage); 
            // nothing happens but
            //=====trial 2=====
            // set {{vm.name}} in _MSG_.signup and do below
            // vm.finalString = $parse(_MSG_).assign($scope, vm.name);
            // ERROR [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 9 of the expression [Weclome {{vm.name}}.] starting at [{{vm.name}}.].
        });
})();
<html ng-app="app">
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="MessageController as vm ">
    {{ vm.welcomeMessage }} ==> Welcome John Smith to the world


    // trial 1

    {{ vm.finalString }}
</body>
</html>

7
  • I forgot to add some code into HTML to make in angular compatible but do not know how to edit the code part while editing the question. Commented Jun 8, 2017 at 10:51
  • Question is not clear. Needs more explanation. What are you expecting? Commented Jun 8, 2017 at 10:57
  • Any errors in console? Commented Jun 8, 2017 at 11:02
  • sorry for that. I need the complete string ; see in HTML part in code after ==> Commented Jun 8, 2017 at 11:02
  • @lin yes, mentioned in the commented lines, within code Commented Jun 8, 2017 at 11:02

1 Answer 1

4

You need to bind $interpolate to this\vm

Like: $interpolate(vm.welcomeMessage)(this);

DEMO:

angular
  .module('app', [])
  .value('MSG', {
    "signup": "Welcome {{name}} to the World.",
    "login": "last login from {{location}}"
  }).controller('MessageController', function($scope, $parse, $interpolate, MSG) {
    var vm = this;
    vm.name = "John Smith";
    vm.location = "India";
    vm.welcomeMessage = MSG.signup;
    vm.finalString = $interpolate(vm.welcomeMessage)(this);
  });
<html ng-app="app">
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="MessageController as vm ">
    {{ vm.welcomeMessage }} ==> Welcome John Smith
    
    <br>// trial 1<br>
    {{ vm.finalString }}
</body>
</html>

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

3 Comments

it's not printing the variable name even i tried vm an this both as second parameter
oh, it's my mistake, I need to remove vm. from MSG string value too. Thanks
@pro.mean: glad to help you.:)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.