Issue with ng-repeat directive not functioning

Let's dive into this directive:

.directive('img', function () {
    return {
        restrict: 'E',
        link: function (scope, elem, attr) {
            if (attr.src && attr.type === "extension"){

                var url = "chrome-extension://" + chrome.runtime.id + attr.src
                // console.log(url)

                elem[0].removeAttribute('src')
                // elem[0].setAttribute("src", url)
                // elem[0].dataset.ngSrc = url
                console.log(elem[0])
                console.log(elem[0].src)

            }

        }
    };
})

In the file profile.html:

          <tr ng-repeat="integration in profile.integrations">
             <td>
                  <!-- <h3>{{integration.provider}}</h3> -->
                 <img type="extension" src="/images/icons/{{integration.provider}}.png" alt="" width="50px">
             </td>
         </tr>

Despite my efforts, the console log shows that the src is not being removed or replaced by the URL. It seems to be related to ng-repeat as it works perfectly with another image.

Answer №1

You are essentially replicating one of Angular's convenient directives that was created for scenarios where an expression is used in the src attribute. Instead of using src, opt for ng-src and eliminate the need for your img directive

Check out the ng-src documentation: https://docs.angularjs.org/api/ng/directive/ngSrc

Inserting Angular markup like {{hash}} into a src attribute won't function as intended: Initially, the browser will fetch from the URL with the literal text {{hash}} until Angular substitutes the expression within {{hash}}. The ngSrc directive resolves this issue.

<img type="extension" 
     ng-src="/images/icons/{{integration.provider}}.png" alt="" width="50px">

As mentioned by runTarm in the comments, this doesn't incorporate the chrome-extension protocol into the image URL. To achieve that, you need to take two steps:

  1. Incorporate chrome-extension into the AngularJS whitelist to prevent Angular from appending unsafe: to the URL
  2. Add the expression to ng-src to include the protocol

Whitelist addition

//adapted from http://stackoverflow.com/a/15769779/560593
var app = angular.module( 'myApp', [] );
app.config( ['$compileProvider', function( $compileProvider ) {   
    //includes chrome-extension in the whitelist
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
]);
app.run(function($rootScope){
    //assign the id to the rootScope for usage in expressions
    $rootScope.extensionUrl = "chrome-extension://"+chrome.runtime.id;        
});

HTML

<img ng-src="{{extensionUrl}}/images/icons/{{integration.provider}}.png" alt="" width="50px">

JSFiddle

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

Creating a line between two points in raphael

Hello there, I'm looking to create a line between two points in Raphael. Could you please provide me with some examples or guidance on how to achieve this? Thanks a lot!) ...

The JavaScript string in question is: "accepted === accepted && 50 > 100". I need to determine whether this string is valid or not by returning a boolean answer

I am developing a dynamic condition builder that generates a JavaScript string such as, tpc_1 === accepted && tpc_6 > 100 After the replace function, the new string becomes, accepted === accepted && 50 > 100 Now my challenge is to va ...

Issue with onClientClick not functioning properly when performing a jQuery function call

How can I make a jQuery form appear when an ASP.NET server-side button is clicked by the user? Currently, when I click on the button during runtime, the page reloads quickly without displaying the jQuery form. I am aiming to achieve a similar effect show ...

Utilizing AngularJS to retrieve and showcase information from a single post through the WordPress API

Utilizing the WordPress API as a data source for an AngularJS/Ionic application, I have a post type named programmes. The JSON structure of the programmes includes: var programmes = [ { id: 6, title: "A post", slug: "a-post" }, { id: 7, title ...

Preventing text from wrapping in a TypeScript-generated form: Tips and tricks

I’m currently working on a ReactJS project and my objective is simple: I want all three <FormItem> components to be displayed in a single line without wrapping. However, I am facing the following output: https://i.stack.imgur.com/mxiIE.png Within ...

The Angular material datepicker is not accurately capturing the date I am trying to select

I am facing an issue with the Angular Material datepicker where it does not select the date I choose. Instead, in my AngularJS controller, I always get the sysdate even if I select another date. Can anyone help me figure out what I am doing wrong? Here is ...

Interact between two identical directives with isolated scopes

As a newcomer to AngularJS, I am encountering an issue with communication between two instances of the same custom directive that has an isolated scope. How can this be achieved? Any guidance or suggestions would be greatly appreciated. <div date-contr ...

Styling GeoJSON data in the React Leaflet mapping library can greatly enhance the

I successfully incorporated the leaflet map library into my react project. You can check it out here. I also created a geojson map component as shown below: class MapContainer extends React.Component { state = { greenIcon: { lat: 8.3114, ...

leafletjs: render Points of Interest (POIs) using canvas technology

I am looking for a way to efficiently draw multiple geo points using Leaflet and HTML5 canvas. My data source is geoJSON, but according to the documentation of Leaflet, drawing geo positions as canvas is currently not supported. var anotherGeojsonLayer = ...

What benefits does minifying server-side nodejs code provide?

Is there a benefit to minifying Node.js code in the same way as minifying JavaScript, particularly for reducing size and improving network download speed? When a file is required in Node.js, it is loaded into V8 and processed and stored in memory in some f ...

The functionality of res.send is not working correctly

Attempting to send a response from my express application to the front-end in order to display an alert. Here is what I have attempted in my app: if (info.messageId) { res.redirect('back'); res.send({ success: true }); } ...

What is the best way to utilize regex for replacing a string within Node.js environment?

I'm struggling with updating the string in my code. Essentially, I have a .php file and I want to modify some constants using the replace package. The output of my current code is: // Current Output define('DB_NAME', 'foo'); // ...

Disabling dates in Kendo Date Time Picker (Angular): An easy guide

<input id="startDate" kendo-date-time-picker k-ng-model="vm.startDate" k-on-change="vm.updateStartDate()" required /> Can someone please explain how to incorporate disabled dates into this date picker without utilizi ...

Customizing button appearances in the control div on Google Maps - A guide

Is there a way to manipulate elements and adjust styles by clicking buttons on the map control div? I want to achieve the same effect on the map as with the buttons in the table. Code: jsFiddle Update: Thanks to your assistance, I was able to achieve th ...

Step-by-step guide to selecting a specific point on an HTML5 canvas using Python's selenium webdriver

Looking to automate interactions with a simple HTML5 application on a website using Selenium webdriver in Python with Firefox on Linux. The challenge is clicking a button on an HTML5 canvas, then dragging one or two objects around the canvas post-button cl ...

Utilizing AngularJS to incorporate a global scope function within another function

I have a specific AngularJS function named editlocation that triggers a Modal window to edit three data points. Following this process, I aim to execute plotmarkers, which is utilized in another scenario of an ng-click. Despite attempting different approa ...

Node.js with Koa: Discontinuation of generator usage on the next step

I am working with a custom object in which I pass a parameter, and then I need to search for all documents in my collection and process them. Here is the code for my custom object: var db = require('../lib/db'); function Widget(n,l,c,o,t,p) { ...

Authentication failed due to Bcrypt.compare() returning invalid credentials

const express = require('express'); const router = express.Router(); const auth = require('../../middleware/auth'); const bcrypt = require('bcryptjs'); const jwt = require('jsonwebtoken'); const config = require(&apo ...

Anticipate that the typescript tsc will generate an error, yet no error was encountered

While working in the IDE to edit the TypeScript code, an issue was noticed in checkApp.ts with the following warning: Argument type { someWrongParams: any } is not assignable to parameter type AddAppToListParams. Surprisingly, when running tsc, no error ...

Transforming S3 Buffer Information into a PDF Document

Utilizing an express route to fetch the s3 object through the AWS SDK: router.get('/myRoute', (req, res) => { const s3 = new AWS.S3({apiVersion: '2006-03-01'}); s3.getObject({Bucket: 'my-bucket', Key: 'my-key'}, ...