Can we use angularJS string interpolation ( {{}}) in jquery html function

Question

I want to use angularJs string interpolation inside Jquery html function

$('#existingScoresForWeek').html("<p>{{1 + 1}}</p>");

The above line of code is not printing Result as 2

<div data-ng-app="myApp"  ng-controller="myCtrl">
<p id="existingScoresForWeek"></p>
<button ng-click="myFunc()">sub</button>

</div>

<script>

var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myFunc= function(){
    ScoreScreenersSave();
};
function ScoreScreenersSave() {
    $('#existingScoresForWeek').html("<p>{{1 + 1}}</p>");
}

});
</script>

Actual Result: {{1 + 1}} Expected Result : 2

Harshad · Accepted Answer · 2019-05-29 09:36:06Z

1

Use $compile to compile your html string. See below:

var app = angular.module("myApp",[]);
app.controller("myCtrl", function($scope, $compile) {
  $scope.myFunc= function(){
     ScoreScreenersSave();
  };
  function ScoreScreenersSave() {
     $('#existingScoresForWeek').html($compile("<p>{{1 + 1}}</p>")($scope));
  }
});

Hope it helps!

edited May 29, 2019 at 9:36

answered May 29, 2019 at 9:30

Harshad

1341 silver badge6 bronze badges

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

Collectives™ on Stack Overflow

Can we use angularJS string interpolation ( {{}}) in jquery html function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related