AngularJS fails to recognize Iframe element during REST request

I'm having trouble with my webpage only reading the Iframe tag. It's sending the content correctly according to Postman.

Postman is giving me this content:

 "Conteudo": "<p>Test iframe:</p>\n\n<p><iframe frameborder=\"0\" height=\"300\" scrolling=\"no\" src=\"https://www.express.co.uk/news/science/923166/space-news-supernova-birth-astronomy-victor-buso\" width=\"300\"></iframe></p>\n\n<p>&nbsp;</p>\n\n<p>Check it OUt</p>\n",

I'm not sure why there are backslashes in the HTML though.

When I try to display the same content on my console, I get this result:

<p>Test iframe:</p>
<p>
<iframe frameborder="0" height="300" scrolling="no" src="https://www.express.co.uk/news/science/923166/space-news-supernova-birth-astronomy-victor-buso" width="300"></iframe>
</p>

<p>Check it OUt</p>

However, when displaying it on HTML, I just see an empty element like this: https://i.sstatic.net/IpQHJ.png

I'm confused about why my navigator can't render the response in HTML. Any insights?

Thanks for your help!

javascriptangularjsrendering

Answer №1

To ensure that the content is secure in Angular, it's important to apply $sce.trustAsHtml on your HTML string before binding it. Here's an example snippet.

angular
  .module('myApp', [])
  .controller('myController', ['$scope', '$sce', function($scope, $sce) {
    $scope.News = {};
    
    var text = "<p>Test iframe:</p>\n\n<p><iframe frameborder=\"0\" height=\"300\" scrolling=\"no\" src=\"https://www.express.co.uk/news/science/923166/space-news-supernova-birth-astronomy-victor-buso\" width=\"300\"></iframe></p>\n\n<p>&nbsp;</p>\n\n<p>Check it Out</p>\n";
    
    $scope.displayText = function() {
      $scope.News.Content = $sce.trustAsHtml(text);
    }
  }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <div ng-bind-html="News.Content"></div>  

  <button type="button" ng-click="displayText()">Display Content</button>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to bounce back from mistakes in Angular

As I prepare my Angular 5 application for production, one issue that has caught my attention is how poorly Angular handles zoned errors. Despite enabling 'production mode', it appears that Angular struggles to properly recover from these errors. ...

javascriptangulardomerror-handling

Unspecified data response error in Angular JS

As a beginner in Angular JS, I am currently working on calling a Rest API using JSON data. However, when I run the HTTP-server, I am not receiving my response data as expected. function retrieveContacts(contactsdata) { contactsdata.getContacts().the ...

javascriptangularjsnode.jsjson-server

Obtain the latest NPM package versions

I am currently seeking a way to compile a comprehensive list of all major versions that have been released for a specific NPM package. By utilizing the following API link, I can retrieve a list of available versions which includes both the major and exper ...

javascriptnode.jsapinpm

Tips on enclosing <li> elements within <ul> tags

Whenever I trigger the button within the .items class, it generates <li> elements in the following manner: <ul class="items"> <ul class="items"> <li>img1</li> ...

javascriptphpjqueryajaxjson

Dynamic Form Layout with Angulajs' Adaptive Data

As a developer, I have created a form using a directive and I am supplying the layout data from my controller. TheController.js [{ "type":"selectbox", "name":"name_one", "label":"Name One" }] This information is then sent to my form_directive which handl ...

ajaxangularjsangularjs-directiveforms

How can I incorporate popups in React using mapbox-gl?

Currently utilizing mapbox-gl within React, everything seems to be functioning properly except for the integration of mapbox-gl's Popups. I have the function let Popup, but I am uncertain about how to incorporate it. renderMap() { if (this.props. ...

javascriptreactjsmapboxmapbox-gl

Sorting through a JavaScript array

I am facing a peculiar problem while trying to filter an array in TypeScript. Here is the structure of my object: Sigma.model.ts export class Sigma { sigmaId: number; name: string; userId: number; starId: string; } `` The starId property contains com ...

javascriptangulartypescript

Choose Default Value in Drop-Down List in AngularJS when Page Loads

Within the realm of Angularjs, there exists a DropDown: <select ng-model="category" ng-change="categoryChanged(category)" class="form-control" data-ng-options="category as category.name for category in categories"> <option value="">Se ...

javascriptjqueryhtmlangularjs

javascript Arabic speech synthesis

Attempting to utilize SpeechSynthesisUtterance for Arabic language Successfully functioning with English content $(document).ready(function() { var u1 = new SpeechSynthesisUtterance('Hello world!'); u1.lang = 'en-US'; u1.pitch ...

javascriptjquerytext-to-speech

Tips for choosing the desired test to execute with Nightwatch Programmatic API

Currently, I am in the process of developing a web application that enables me to execute Nightwatch tests through a visual interface. At this point, I have successfully been able to run all my tests using a post request from my web app utilizing the Nig ...

javascriptseleniumexpressnightwatch.js

Steps to retrieve an ext.js grid using data from a database

I've been struggling to make a basic Ext.js application work, which is supposed to pull data from a database and show it in an Ext.js grid. However, all I keep getting is "Failure:true". If you could help me identify the mistake, that would be great. ...

phpjavascriptextjs

Working with AngularJS: binding data to dynamically appended HTML elements using JavaScript

Is there a way to connect an angular event and model to an html element that is added through javascript code? To see my code, click here: https://jsfiddle.net/hq7qk48n/13/ <div ng-app> <div ng-controller="MyController"> <input ...

javascriptjqueryhtmlangularjs

Setting the root position of a div: How can it be done?

Imagine a scenario where a div element is designed to follow the mouse cursor on the screen. This functionality is achieved by manipulating the document's `mousemove` event and adjusting the div's `left` and `top` positions based on the event dat ...

javascripthtmlcss

Issue encountered while utilizing JQueryUI alongside TypeScript and the definition file from DefinitelyTyped

Currently, I'm attempting to incorporate JQueryUI with TypeScript by first installing JQueryUI using npm install jquery-ui-dist, and then installing JQuery with npm install jquery. Additionally, I have included the definition files from DefinitelyType ...

javascriptjquery-uitypescriptnpmdefinitelytyped

Retrieving the Short Date Format from the user's device or browser within a React application

Currently, I am in the process of utilizing reactjs along with material UI datepicker. My objective is to transmit the short date format to the datepicker component, such as format="MM/dd/yyyy". In addition, I wish to employ the pre-existing date ...

javascriptreactjsmaterial-ui

Creating image filters using an object in jQuery

I am faced with a challenge where I have multiple image tags nested within a div that has the class google-image-layout. Each image is equipped with various data attributes, including: data-anger="0" data-disgust="0" data-facedetected="0" data-fear="0" da ...

javascriptjqueryhtml

Unable to access placeholder information from the controller

I am new to implementing the mean stack. I attempted to view data from the controller, but encountered an error message in the web browser's console. Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.3/$controller/ctrlreg?p0=AppCtrl Stack ...

javascriptangularjshtmlexpress

Passing a variable via routes using Express

app.js var express = require('express'); var app = express(); var textVariable = "Hello World"; var homeRoute = require('./routes/index'); app.use('/', homeRoute); index.js var express = require('express'); var ...

javascriptnode.jsexpress

Tips for extracting and dividing the value of an input field using jQuery

My system includes an input search field where I can enter the make and/or model of a vehicle to conduct a search based on that term. The challenge arises when attempting to distinguish between the make and model, especially for makes with multiple words ...

javascriptjquery

Image caption dynamically updated to match thumbnail caption using jQuery upon click event

My goal is to dynamically load the data-caption of thumbnail images when clicked, and then update the main image's data-caption when the main image is changed with a thumb image. I am currently struggling to make the data-caption update along with the ...

javascriptjqueryhtmlcssimage