Issue with $sce.trustAsResourceUrl(url) function in angularJS

Having trouble with loading a file into an iframe.

Here is the code for the iframe:

<iframe width="100%" height="800px" scrolling="no" ng-src="{{someUrl}}"></iframe>

In the controller, I am trying to:

$scope.someUrl = $sce.trustAsResourceUrl($scope.file);

However, it's still not functioning correctly. I'm at a loss as to what could be going wrong. Any assistance would be greatly appreciated.

Answer №1

Although this question is from a while ago, if anyone is still struggling with AngularJS in 2020,

I encountered an error message that stated:

"that concatenate multiple expressions when a trusted value is required"

I found that removing whitespace between expressions and curly braces resolved the issue:

for example, instead of ng-src="{{ someUrl }}", use ng-src="{{someUrl}}"

It's odd how whitespace seems to be treated as part of the concatenation process.

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

Swapping out a subarray within an array containing objects with a fresh array consisting of objects

Here is the structure of my data document: { "_id": "6287a6c5975a25cc25e095b0", "userName": "Robot", "projectName": "TestProject", "projectTypeName": "fixed project", "pro ...

Creating distinctive ng-form tags within a form using ng-repeat in Angular

I need help with creating a form that includes a table looping over a list of objects. Each object should have checkboxes for the user to check/uncheck attributes. The issue I am facing is setting the ng-model attribute on the checkboxes. This is what my ...

Customize cell color in angularjs and ui-grid

In my ui-grid, I have two columns - firstName and lastName. The background color of the firstName column is set to blue. When I click on the header of the lastName column, I want to change the background color of the lastName column to blue and return the ...

The transmission of MVC5 AngularJS data from the service to the controller seems to be encountering an issue

Greetings, I am currently working on an application using AngularJS with MVC5. My main task is to retrieve data from the database based on ID. The server side code is functioning properly. However, I am facing challenges in binding data to controls in the ...

Leveraging Python to authenticate on a website using JavaScript and secure HTTPS connection

I am looking to utilize python for logging into a website that utilizes javascript and https encryption. The specific site I'm referring to is: My goal is to create a python script that successfully logs in, with the intention of later translating th ...

Tips for maintaining table elements in place using JavaScript

My goal is to keep the tags within the table fixed when printing. The code I've written functions correctly in View mode, however, when printed using JavaScript, if one of the columns is too large, the rest of the columns get displaced. I want all col ...

Troubleshooting the issue with the default dropdown select in AngularJS

var jsonData ='[ {"type":"product", "id":1,"label":"Color", "placeholder":"Select Jean Color", "description":"", "defaultValue":"Brown", "choices":[{ "text":"Denim", "price":"$0.00", "isSel ...

Guide to adjusting column width in an XLSX worksheet using Angular4

I am trying to convert HTML into an XLSX sheet in Angular using SheetJS. However, I am encountering an issue where the width of each column is limited to 256 only, and I need to increase it. I have attempted to use ws[!cols] of ColInfo, but I am strugglin ...

Invoking two asynchronous functions in React, where the first function relies on the state modified by the second function

Currently, I am working on an app that utilizes the Geoapify API. Within this app, I have implemented three primary API functions. Users are presented with two options on the user interface: they can manually search for cities or utilize their current loca ...

Error encountered when attempting to insert data into a PostgreSQL database using Node.js and Sequelize

I'm currently using the node sequelize library to handle data insertion in a postgress database. Below is the user model defined in the Users.ts file: export class User extends Sequelize.Model { public id!: number; public name: string; public ...

Transforming a div into a clickable hyperlink

I have a JavaScript function that generates a div with a link inside it. Here is how the div and link are created: $('#info').find('#link').text("View"); //Creates a new link var eventLink1 = document.createElement('a& ...

Prevent TypeScript from generalizing string literals as types

I have a constant Object called STUDY_TAGS with specific properties const STUDY_TAGS ={ InstanceAvailability: { tag: "00080056", type: "optional", vr: "string" }, ModalitiesinStudy: { tag: "00080061", type: " ...

Transform an array into an object utilizing only underscore

I'm currently learning about underscore and came across a task that I could use some assistance with. I have an array containing objects like the following: [ // ... { "type": "presence", "params": { "i ...

SharePoint 2013 only allows the first AJAX request to work successfully, except when in Edit Mode

I am facing a challenge of making two AJAX requests simultaneously on a SharePoint page. One request originates from the current site, while the other comes from a team site. When I use different URLs (/events) and (/travel), each one works fine when use ...

The difference between using document.getElementsByTagName("img") and document.getElementById('testimg')

My HTML code is as follows: <a href="index.php"><img id="testimg" src="images/logo.png"/></a> This is my JavaScript code: function getW(){ var theImg = document.getElementById('testimg'); return theImg; } theImg = ...

Any ideas on how I can enable rotation of SVG images within a Bootstrap 4 Accordion card with just a click?

I'm working on a Bootstrap 4 accordion card that has an SVG arrow image in each header. I am trying to make the arrow rotate 180 degrees when the header is open, and return to its initial state when it is closed or another header is opened. Currently, ...

Is there a way to download a file using an ajax request?

We are faced with a particular scenario in our application where: Client sends a request Server processes the request and generates a file Server sends the file back as a response Client's browser prompts a dialog for downloading the file Our appli ...

Error: The function screams cannot be accessed in this.state in React JS when using Firebase

This is the code I am working on and I need help to solve a problem: import React, { Component } from 'react' import Grid from '@material-ui/core/Grid'; import axios from 'axios'; class home extends Component { state = { ...

Is it possible for you to pinpoint the mistake in the code below?

I've been trying to locate an error in the function but have been unable to do so. As a beginner in this area, I would appreciate your patience. <html> <head><title>print names</title> <script langua ...

Alignment of MD-icon and MD-select in material design

Can an icon be aligned before a md-select tag? I attempted this in the angular-material codepen, but adding an icon before a md-select tag caused alignment issues. Check out the codepen here https://i.stack.imgur.com/pQhFp.png I experimented with differ ...