How to convert string into angular binding?

Question

I have a string like var message = "you are moving to {{output.number}}";

I want this to be put to div element. i tried using $("#message").html(message);

but it just printed the whole string for me. I want to have the output.number print the value it had. Is it possible to achieve what i want?

I am using angular.js 1.5.

I don't understand.... Please post a verifiable example. Why are you using Jquery if you use AngularJS... ? — Alexis, Dec 27 '16 at 08:53
you can use `angular.element` and you must have to bind `$scope` using `$compile` with your dom element [see this answer](http://stackoverflow.com/questions/20651578/how-to-bind-an-angularjs-controller-to-dynamically-added-html) — gaurav bhavsar, Dec 27 '16 at 08:57
For angular 1, take a look at `$compile` provider.... Angular doesn't do magic with HTML, it goes through a compile-link-digest cycle, so anything you need to add it through `$compile` — olivarra1, Dec 27 '16 at 08:58

score 1 · Answer 1 · answered Dec 27 '16 at 09:00

I hope you are looking for something like this. You can do it by using the scope variable inside the controller.

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.bootcss.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="myCtrl">
        <input type="number" ng-model="output.number" />
        <button ng-click="AppendItem()">Append</button>
        <div id="message"></div>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.output = {};
            $scope.AppendItem = function () {
                var string = "Your Number is " + $scope.output.number;
                $("#message").html(string);
            }
        });
    </script>

</body>

</html>

score 1 · Accepted Answer · answered Dec 27 '16 at 09:00

1

Use $interpolate service like:

var message = $interpolate("you are moving to {{number}}")(output) 
// or
var message = $interpolate("you are moving to {{output.number}}")($scope)

answered Dec 27 '16 at 09:00

Matuszew

841
5
12

Not a problem :) have fun! – Matuszew Dec 27 '16 at 09:39

score 0 · Answer 3 · answered Dec 27 '16 at 08:58

0

You are almost there just try :

$scope.output.number = '123';
var message = "you are moving to" + output.number;
$("#message").html(message);

Don't put variable inside "" quotes.

answered Dec 27 '16 at 08:58

Jenny

663
4
8

score 0 · Answer 4 · answered Dec 27 '16 at 09:06

0

When we are going to append a string variable to another string variable then we need to use append operator ie., "+". Here is an example.

var output.number = 10;
var message = "you are moving to " + output.number;
$("#message").html(message);

answered Dec 27 '16 at 09:06

Dimple

173
2
13

score 0 · Answer 5 · answered Dec 27 '16 at 09:06

0

You can do like this using $compile:

$compile(angular.element(document.querySelectorAll('#message')[0]).html("you are moving to {{output.number}}"))($scope);

Add $compile as dependency in your controller.

All the best.

answered Dec 27 '16 at 09:06

Sai M.

2,548
4
29
46

This is working too. but i like the $interpolate for my problem – Voltaire John Biton Dec 27 '16 at 09:13
Ok fine. All the best. – Sai M. Dec 27 '16 at 09:32

score 0 · Answer 6 · answered Dec 27 '16 at 09:11

You can try this:

<html ng-app="app">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
 </head>
 <body ng-controller="appCtrl">
  <p id="message"></p>
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"> </script>

</body>

JS:

Should not write DOM Manipulation code inside controller, but can get the idea how to do it.

var app = angular.module('app', []);
app.controller('appCtrl', function($scope, $interpolate){
  var msg = "you are moving to {{number}}";
  $scope.number = 10;
  $('#message').html($interpolate(msg)($scope));
});

How to convert string into angular binding?

6 Answers6