Alburkerk Alburkerk - 1 year ago 46
AngularJS Question

Dynamic src path with CSS animation

I tried to make an img with a dynamic path. The common solution seemed to use


I did that but I got a problem : my controller was called before the html was loaded and I get an error because the id was referring to nothing. I understood the problem and the solutions seemed to be

1) Put the script in a


balise under the page. This should work, but I want to call getElementById() in my controller, as the path I want to do depends on parameters (it's actually the controller of a uibmodal).
Consequently, as I can't pass the parameters from the controller to the script balise in my HTML, it's no longer a solution.

2) I also tried to use window.onload(), but when I try that, the onload function is not called at all.
Furthermore, I remember had trying this and even when the function was called, it was too late because the img need to be used in an animation.

I kinda run out of steam and really don't see what to do. I'm working with angular thus I didn't try solution based on JQuery, but I thought there was no reason they were more relevant that window.onload.

Does anyone know how to solve that issue ?

(function() {
'use strict';


MyBadgeController.$inject = ['$uibModalInstance', '$state', '$stateParams', 'BadgeView', 'items', 'Lesson'];

function MyBadgeController($uibModalInstance, $state, $stateParams, BadgeView, items, Lesson) {
var vm = this;


vm.blocName = items.title;
vm.ImagePath = items.path;

window.onload = function(){
var img =document.getElementById('ImgBadge');
img1.src= vm.ImagePath;


function clear () {

vm.close = function() {

//$state.go('viewCourse', {id: $stateParams.idLesson});

<script src=""></script>
<div class="Badge_logo-demo">
<img ng-click="vm.close()" src="" alt="Badge_logo" id= "ImgBadge" class="Badge_logo">
<h2 class="Badge_byline" id="Badge_byline"> You successfully did the Block {{vm.blocName}} </h2>


Here is a snippet, it obviously doesn't work but it is to show my code. I didn't put CSS as it is not relevant.
But if there is a solution, it can be checked with that snippet by putting the absolute path of the image in vm.ImgPath.

I precise that everything is called at the opening of the uibmodal, so it's not about forgetting ng-controller or whatever. The {{blocName}} is working for me aswell.

Answer Source

You can use angular scope to dynamically change the src of your js files, images or css.

This is an example from my own application for css:

<link data-ng-if="brand" rel="stylesheet" type="text/css" data-ng-href="css/app/brand/{{brand.type}}/brand.css" />

where in the controller above we have a property:

$scope.brand = {type:"cocacola"}

we then allow the user to manipulate that scope variable using a dropdown to set it with ng-model="brand.type"

notice the data-ng-if="brand" we check if the controller has loaded the property yet. The advantage is that you don't need to use basic javascript but you can do it the angular way