Angular JS: placeholders not getting resolved

Question

My angular js code is not resolving the placeholders ,while I am trying to get it resolved on runtime.

Js code :

var message ={s:"hello {{name}}"};

angular.module("myapp",[]).controller("myctrl", function($scope){

  var ctrl=this;

  $scope.name="david";
  $scope.w=message.s;

  $scope.call=function(){
    //alert(message);
  };

});

HTML :

<div ng-app="myapp">
    <div ng-controller="myctrl as ctrl">
        {{w}}
        <input type="text" ng-model="ctrl.name" />
        <input type="submit" ng-click="call();" />
    </div>
</div>

Expected output is :hello david;

Attaching fiddle link :https://jsfiddle.net/rakotkar/o46coezd/2/

You have to use `{{name}}` (interpolation) only in the template — Yordan Nikolov, Jul 11 '17 at 10:25

Vivz · Answer 1 · 2017-07-11T10:38:25.707

0

You are mixing up controller as syntax and $scope. When you are using controller as syntax , you have to use this keyword instead of $scope.

JS

var message ={s:"hello "};

angular.module("myapp",[]).controller("myctrl",function(){

  var ctrl = this;

  ctrl.name ="david";
  ctrl.w = message.s;
  ctrl.call = function(){
    //alert(message);
  };

});

HTML:

<div ng-app="myapp">
    <div ng-controller="myctrl as ctrl">
        {{ctrl.w}}{{ctrl.name}}
        <input type="text" ng-model="ctrl.name" />
        <input type="submit" ng-click="call();" />
    </div>
</div>

Demo:https://jsfiddle.net/o46coezd/4/

For more info on controller as syntax:AngularJs "controller as" syntax - clarification?

edited Jul 11 '17 at 10:38

answered Jul 11 '17 at 10:25

Vivz

6,625
2
17
33

It wouldn't help me ,as per my real business scenario, I need to display different messages and I need to populate different attributes in the message. – Rajeev Akotkar Jul 11 '17 at 11:13
What different messages and attributes? – Vivz Jul 11 '17 at 11:19
Tried to explain the same .please refer https://jsfiddle.net/rakotkar/o46coezd/16/ – Rajeev Akotkar Jul 11 '17 at 11:36
You can use ctrl.message ={s:"hello"+" "+ ctrl.name }; if thats what you are looking for – Vivz Jul 11 '17 at 11:37
what I want to do is , I want to keep the error messages in a seperate js file so that I can get directly on my page but the messages need the value from response,$scope variables so wanted to take this approach. – Rajeev Akotkar Jul 11 '17 at 11:42
You can simply store the error messages in a scope variable and print it if a flag is true – Vivz Jul 11 '17 at 11:44
so my response would contain different fields , now based on some conditions I need to pick up different messages and those messages need different field of response. – Rajeev Akotkar Jul 11 '17 at 11:45
my messages are something like the application for {{product}} is rejected.and hence need of doing this I feel. and I dont want to do string concatenation. – Rajeev Akotkar Jul 11 '17 at 11:47
You can store the corresponding value of your varaible(product in this case) in a scope variable and show it in the front end. In js if you want you have to do something like this $scope.error="application for" +$scope.product +"is rejected" and print in the UI if a flag is true by {{error}} – Vivz Jul 11 '17 at 11:51
This spolution was already on my mind but I felt String concatenation would make code look dirty , so tried to avoided that .Thanks for inputs. – Rajeev Akotkar Jul 11 '17 at 11:54
"hello {{name}}" is same as "hello" + $scope.name though the former won't work. So I don't see any difference in logic that would not make "hello {{name}}" code less dirty. – Vivz Jul 11 '17 at 11:57
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/148891/discussion-between-vivz-and-rajeev-akotkar). – Vivz Jul 11 '17 at 12:02

score 0 · Answer 2 · edited Dec 18 '19 at 13:32

0

You can try like below. As you're trying to access scope from outside module, it's not possible I think.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body>

<div ng-app="myapp">
<div ng-controller="myctrl as ctrl">
{{w}}
<input type="text" ng-model="ctrl.name"/>
<input type="submit" ng-click="call();"/>
</div>
</div>
<script>
var message ={s:"hello"};
angular.module("myapp",[]).controller("myctrl", function($scope){

  var ctrl=this;
  $scope.text = message;
  $scope.name="david";
  $scope.w= $scope.text.s + ' ' + $scope.name;

  $scope.call=function(){
    //alert(message);
  };

});
</script>

</body>
</html>

edited Dec 18 '19 at 13:32

halfer

19,824
17
99
186

answered Jul 11 '17 at 11:12

Arun

450
3
8

it would not help as I am haivng a big message string that requires the place holders in between and these place holders will be resolved once the response comes from the api and then assigned as scope variables. – Rajeev Akotkar Jul 11 '17 at 11:37
than you can keep your "Message" variable inside module right?? – Arun Jul 11 '17 at 12:02
doesnt seem much useful to me.Sorry I misunderstood as if you are asking tohave ngMessage.I wanted to keep message variable in an separate js fiel and then just put {{}} expression and resolve them on runtime/while rendering . – Rajeev Akotkar Jul 11 '17 at 13:41

Angular JS: placeholders not getting resolved

2 Answers2