Append html element dynamically in angularjs?

beginer
beginer
1544 Points
52 Posts

How to append html element dynamically in angularjs? I have following div element in html page

<div class="calendarBox">
</div>

I want to append  some html content in this div from controller.

Views: 28224
Total Answered: 2
Total Marked As Answer: 1
Posted On: 04-Jul-2017 21:31

Share:   fb twitter linkedin
Answers
Jak
Jak
908 Points
132 Posts
         

Use following:

var divElement = angular.element(document.querySelector('.calendarBox'));
var htmlElement = angular.element('<a href="niceonecode.com">niceonecode.com<a>');
divElement.append(htmlElement);
$compile(divElement)($scope);
Posted On: 05-Jul-2017 03:22
Stevan
Stevan
312 Points
20 Posts
         
  1. Get angular element of div
  2. Use .append() method to append html to that angular element
<!DOCTYPE html>
<html ng-app="" ng-controller="myCtrl">
<body>
<button ng-click="AppendHtml()">
  Append
</button>
<div id="calendarBox">
</div>
<script>
function myCtrl($scope) {
    $scope.AppendHtml = function() {
     var myEl = angular.element( document.querySelector( '#calendarBox' ) );
     myEl.append('Hi<br/>');    
    }
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Posted On: 05-Apr-2019 08:51
 Log In to Chat