Trying to create an image with a dynamic path led me to the common solution of using
document.getElementById();
However, I encountered a problem - my controller was being called before the HTML was fully loaded, resulting in an error because the id was referencing nothing. Understanding the issue, I explored potential solutions:
1) Placing the script within a
<script>
tag at the bottom of the page. While this method could work, I needed to call getElementById() in my controller to dynamically set the path based on parameters (specifically within a uibmodal controller).
Since passing parameters from the controller to the script tag in my HTML proved challenging, this approach no longer seemed viable.
2) I also attempted using window.onload(), but found that the function was not being triggered at all. Additionally, even when it did execute, it was too late for the image to be used in an animation.
At a loss for further solutions and working within an Angular environment, I refrained from exploring JQuery-based options, believing them to be no more effective than window.onload.
Seeking assistance in resolving this issue, I am sharing a snippet of my code below:
(function() {
'use strict';
angular
.module('objectifDtyApp')
.controller('MyBadgeController', MyBadgeController);
MyBadgeController.$inject = ['$uibModalInstance', '$state', '$stateParams', 'BadgeView', 'items', 'Lesson'];
function MyBadgeController($uibModalInstance, $state, $stateParams, BadgeView, items, Lesson) {
var vm = this;
console.log(items);
vm.blocName = items.title;
vm.ImagePath = items.path;
console.log(vm.ImagePath);
window.onload = function(){
console.log("called");
var img = document.getElementById('ImgBadge');
img1.src= vm.ImagePath;
};
function clear () {
$uibModalInstance.dismiss('cancel');
}
vm.close = function() {
$uibModalInstance.close(true);
//$state.go('viewCourse', {id: $stateParams.idLesson});
}
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div>
<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>
</div>
</div>Given the inability of the current setup to yield results, I must stress that everything is initiated upon opening the uibmodal. Moreover, the {{blocName}} parameter functions correctly for me.