Can Angular be used to display standard HTML tags?

Question

Can Angular be used to display standard HTML tags?

Is it possible to display HTML tags (text with anchors) stored in the $scope variable on the output view? Take a look at this example. I'm facing an issue where the anchors from my database are sometimes hidden within the text. Thank you for any assistance! :)

Sample HTML:

<div ng-app>
  <h2>Html test</h2>
  <div ng-controller="TodoCtrl">
    <p data-ng-repeat="line in anchors">
      {{line}}
    </p>
  </div>
</div>

Controller Logic:

function TodoCtrl($scope) {
  $scope.anchors = [
    "<a href='#'>Something</a>", 
    "Angular ignores html tags :("
  ];
}

javascript angularjs

Answer 1

Answer №1

Indeed, it is potentially achievable through the utilization of the ng-bind-html directive

angular.module('application',['ngSanitize'])
.controller('TaskCtrl',
function TaskCtrl($scope) {
  $scope.links = ["<a href='#'>Something</a>", "Angular does not overlook html tags :)"];
});

h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.js"></script>
<div ng-app="application">
  <h2>Testing Html</h2>
  <div ng-controller="TaskCtrl">
    <p data-ng-repeat="item in links" ng-bind-html="item">
      
    </p>
  </div>
</div>

Answer 2

Indeed, it is potentially achievable through the utilization of the ng-bind-html directive

angular.module('application',['ngSanitize'])
.controller('TaskCtrl',
function TaskCtrl($scope) {
  $scope.links = ["<a href='#'>Something</a>", "Angular does not overlook html tags :)"];
});

h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.js"></script>
<div ng-app="application">
  <h2>Testing Html</h2>
  <div ng-controller="TaskCtrl">
    <p data-ng-repeat="item in links" ng-bind-html="item">
      
    </p>
  </div>
</div>

Answer 3

Answer №2

Incorporating the HTML once it has been marked as trustworthy allows for its injection into the DOM using ng-bind-html.

angular.module('myApp', [])
  .directive('myDirective', function($sce){
    return {
        link: function(scope) {
          scope.trustedHTML = $sce.trustAsHtml('<h1>This is html</h1><h2>Subtitle</h2>');
        }
    }
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.js"></script>

<div ng-app="myApp" my-directive>
    <div data-ng-bind-html="trustedHTML"></div>
</div>

Answer 4

Incorporating the HTML once it has been marked as trustworthy allows for its injection into the DOM using ng-bind-html.

angular.module('myApp', [])
  .directive('myDirective', function($sce){
    return {
        link: function(scope) {
          scope.trustedHTML = $sce.trustAsHtml('<h1>This is html</h1><h2>Subtitle</h2>');
        }
    }
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.js"></script>

<div ng-app="myApp" my-directive>
    <div data-ng-bind-html="trustedHTML"></div>
</div>

Can Angular be used to display standard HTML tags?

Answer №1

Answer №2

Similar questions

The collaboration between NextAuth and Firebase is resulting in a SyntaxError that prohibits the use of import statements outside

Is there a way to reach the public functions within a module from a private method?

What makes componentDidMount the ideal location to initiate AJAX requests?

How can I use React Native to align two text tags differently within the same row?

What is the method of adding a child to the outerHTML of the parent element instead of within it?

Encountering the "TypeError: Unable to access property 'indexOf' of undefined" error while utilizing the ipfs-api

AngularJS collapsible data row is a powerful feature that allows users to easily

Click to remove the ellipsis from the backbone

Protractor: refreshing non-angular login page

Tips for displaying personalized error messages from your REST API in a JavaScript client

What are the best methods for testing REST API and Client-side MVC applications?

Unlocking the JSON array of data in JavaScript: A step-by-step guide

Apply a jQuery class to six randomly selected elements that share the same class attribute

Passing data as a parameter from the view to the controller using AngularJS

What is the proper way to utilize the setState() function in ReactJS?

The size of the card image and content area will remain constant based on the specified percentage

Using TypeScript to Verify the Existence of Words in a String

What is the best way to sort items by their properties?

Experience the feeling of releasing momentum by click and dragging the scroll

Leverage the power of CSS and jQuery's calc function within your React.js