current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

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.

share|improve this question
1  
I don't understand.... Please post a verifiable example. Why are you using Jquery if you use AngularJS... ? – Alexis 24 mins ago
    
Angular 1.X or 2.X? – olivarra1 21 mins ago
    
you can use angular.element and you must have to bind $scope using $compile with your dom element see this answer – gaurav bhavsar 20 mins ago
    
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 18 mins ago
    
i am using angular 1.5 – Voltaire John Biton 18 mins ago
up vote 0 down vote accepted

Use $interpolate service like:

var message = $interpolate("you are moving to {{number}}")(output) 
// or
var message = $interpolate("you are moving to {{output.number}}")($scope)
share|improve this answer
    
wow this is the best solution i found. Thank you so much! – Voltaire John Biton 5 mins ago
up vote 1 down vote

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>

share|improve this answer
up vote 0 down vote

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.

share|improve this answer
up vote 0 down vote

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);
share|improve this answer
up vote 0 down vote

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.

share|improve this answer
    
This is working too. but i like the $interpolate for my problem – Voltaire John Biton 4 mins ago
up vote 0 down vote

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));
});
share

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.