Implementing script loading within the Angular scope

I'm attempting to load a custom script from the database based on client-side logic. I am having trouble figuring out how to make it function properly.

Here is my controller code:

'use strict';
angular.module('youshareApp')
    .controller('ShareCtrl',['$scope','$routeParams' ,'Projectservice',function     ($scope,$routeParams,Projectservice) {
 $scope.projectId=$routeParams.projectId;
 $scope.model.url="/api/v1/project/code/"+$scope.projectId;
...

}]);

This is how my view looks:

<div class="container" ng-controller="ShareCtrl" style="margin-top: 50px;" >
<h3>You are currently contributing to : </h3>

<div class="row" style="margin-top: 10px;">
    <div class="col-md-6"><label class="lead">{{model.name}}</label></div>
</div>

<div class="row" style="margin-top: 10px;">
    <div class="col-md-6"><p class="lead" >{{model.description}}</p></div>
</div>
<script ng-src={{model.url}} />
</div>

Any suggestions on how to get this working?

I've also looked at this post

Using this template snippet:

    <div html-bind-unsafe='html'></div>

And including this in the Controller:

    $scope.html='<script src="'+$scope.model.url+'" />';

Answer №1

Ensuring the safety of the URL is crucial. Take some time to educate yourself on this topic by visiting: https://docs.angularjs.org/error/$sce/insecurl

Another issue that might be occurring is the neglect of using ng-src.

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

What is the process for exporting data from MongoDB?

Recently, I created a web application for fun using Handlebars, Express, and Mongoose/MongoDB. This app allows users to sign up, post advertisements for others to view and respond to. All the ads are displayed on the index page, making it a shared experie ...

The deletion was not successfully carried out in the ajax request

Can anyone help with an issue I'm having while trying to remove a row from a table using the closest function? The function works fine outside of the $.post request, but it doesn't work properly when used within the post request. Here is my code: ...

The output type of a function given an input

Essentially, I have successfully rendered a return type for my combined reducers using the following code: const rootReducer = combineReducers({ notes: notesReducer, categories: categoriesReducer, flyout: flyoutReducer // more reducers }); export ...

What causes the HTML element's X position value to double when its X position is updated after the drag release event in Angular's CDK drag-drop feature?

I am facing a challenge with an HTML element that has dual roles: Automatically moving to the positive x-level whenever an Obsarbalve emits a new value. Moving manually to both positive and negative x-levels by dragging and dropping it. The manual drag a ...

Issue with Bootstrap Carousel: all elements displayed at once

I'm in the process of building a carousel. I have set up the structure, but I only want five blocks to be visible initially, with the sixth block appearing after clicking an arrow. How can I achieve this? My strategy: (adopted from here) img{ b ...

Introducing a new div element completely disrupts the overall layout

Take a look at the code I have provided below. http://jsfiddle.net/xymgwonu/3/ Everything was working perfectly fine until I introduced a new div with the class name <div class="bubble"></div>. This caused some issues with the overall design. ...

Include a triangle shape at the top of a div container that has a background image using CSS

Struggling to add a point or triangle shape to my div with a background image, finding it difficult to create enough open space. This is the desired outcome: This is what I have implemented so far: <div class="bg"></div> .bg { position: r ...

What could be causing my Rest API request to malfunction?

Currently, I am working on a Pokedex website as part of my practice to enhance my skills in using API Rest. However, I have encountered some issues with the functionality. When users first enter the site, the API is being called twice unnecessarily. Additi ...

Exploring the Power of Asynchronous Operations with Await and Async in

I have a basic understanding of how to use await/async in Angular 2 with the following example: async getValueWithAsync() { const value = <number>await this.resolveAfter2Seconds(20); console.log(`async result: ${value}`); } In my Angular ...

Loading website with continuous HTML5 video playback

I'm currently working on a website that features a large section with a video background set to loop. To enhance the user experience, we decided to include a preloading image while the site loads its resources. Our current setup involves using jQuery ...

Discovering and updating a DOM element with a rejuvenating touch: Angular JS

Although not very experienced with Angular JS, here's what I currently have and what I aim to achieve: <div ng-app="MyApp" ng-controller="appController"> <div class="input-group"> <input class="form-control enableEnter" type=" ...

The most effective method for adding a new key/value pair to a nested object

Currently working with React and attempting to add a new key-value pair to an object. I have an if check that verifies a condition, and if it is met, I want to include the key 'author'. if (field.component === 'Author') { this.pro ...

Could there be a glitch in the angular code related to cleanliness

It seems like there might be an issue with Angular rather than my code. I'm trying to create a dynamic form using ng-repeat and encountering a problem where the form scope shows that pristine is true, even when it's not. Plunker can handle form p ...

Determining outcomes of forms added in real-time

Need assistance with dynamically creating tickets, calculating prices, and displaying results when additional tickets are added. Currently facing an issue where price data is not being calculated when a new ticket is added. Any help would be greatly apprec ...

Is there a way to filter out only the objects from the JSON data and exclude the strings?

I am facing an issue while looping through a JSON object. The presence of strings in the JSON is causing the loop to fail. How can I iterate only through the objects in the JSON without affecting the loop? My main goal is to iterate through the objects co ...

Retrieving online content and updating it upon reestablishing internet connection

Currently, I am in the process of developing an app that will feature a substantial amount of web content. My plan is to use Phone Gap build for its release; however, I intend to host all the content online and link to it from within the app. I have been c ...

Experiencing a hiccup while attempting to query the Twitter API using Node.js

I am a beginner exploring the world of node.js, but I keep encountering a perplexing "write after end" error. Despite searching for solutions online, none seem to address my specific issue. My current project involves querying the Twitter API. req.on(&apo ...

Authenticating Users with HTML in Django

I am experiencing an issue with the following condition: {% if object.author == user or object.res_person_1_username == user %} When I display variables using code like this: <p class="article-content mb-1"><strong>object.res_person_ ...

Is it possible to create a Vue JSX component inside a Single File Component using the <script setup> syntax and then incorporate it into the template of the S

I am impressed by how easily you can create small components within the main component file in React. Is it possible to do something similar with Vue 3 composition API? For example: Component.vue <script setup> const SmallComponent = <div> ...

Rendering ng-include before setting the source

Is there a way to prevent the ng-include directive from trying to render before a value on scope is set? Consider the following example: <ng-include src="'./lib/templates/' + $parent.currentEditable.editTemplate"></ng-include> It s ...