I've created a common module that includes a controller, component, and template to initialize the app and set up the base layout. Within this module, there is also a stateful component that makes an HTTP GET request during initialization to fetch a background image from an API. Once the promise is resolved, I use $rootScope.$emit to send an event back to the common controller containing the image URL so that it can dynamically set the background image of the app.
The issue I'm facing is that when I console log the event response inside the $rootScope.$on() function, I see the result. However, anywhere else within the controller (including inside $onInit() or elsewhere), I get no output.
Even more puzzling is that I can successfully render the event data in the Common controller's template – whether it's inside an input box using ng-model or a paragraph. But when I try to include it as part of my inline CSS or background-image directive, it doesn't work as expected. The directive only receives the URL up to the variable name () before cutting off abruptly.
Any suggestions on how to resolve this would be greatly appreciated!
Below is the component controller code:
function MovieDetailController(MovieService, $rootScope){
var ctrl = this;
ctrl.$onInit = function(){
// Retrieve additional data
MovieService.getAdditionalData(ctrl.movie.movie_id).then(function(response){
ctrl.actors = response.credits.cast.splice(0, 6);
ctrl.extras = response.videos.results.splice(0, 3);
ctrl.similar = response.similar.results.splice(0,6);
ctrl.backdrop = response.backdrop_path;
$rootScope.$emit('backdropChange', ctrl.backdrop);
});
}
}
angular.module('components.movie').controller('MovieDetailController', MovieDetailController)And here is the code for the Common Controller:
function CommonController($state, $rootScope){
var ctrl = this;
$rootScope.$on('backdropChange', function(event, data){
ctrl.backdrop = data;
console.log('Back drop is ' + ctrl.backdrop); // Successfully displays result
});
ctrl.$onInit = function(){
console.log('On Init, Backdrop is ' + ctrl.backdrop); // Does not log any result
}
}
angular.module('common').controller('CommonController', CommonController)This is the HTML template for the Common Controller:
<header class="row" id="topnav">
<topnav class="col-sm-12 p-3 d-inline-flex"></topnav>
</header>
<!-- Testing if data is rendered inside the input box and it is! -->
<div class="col-sm-12"><input type="text" name="" ng-model="$ctrl.backdrop"></div>
<!-- Directive only receives first part of URL up to variable then cuts off-->
<main class="row" id="main-body" back-img="https://image.tmdb.org/t/p/original{{$ctrl.backdrop}}">
<aside class="flex-fixed-width-item bg-white" id="sidebar">
<sidebar></sidebar>
</aside>
<section class="col" id="content-window">
<!-- Filters and Main Section Submenu -->
<div class="row">
<nav class="col-sm-12 filter-container">
<div ui-view="details-menu"></div>
</nav>
</div>
<!-- Main Content Section -->
<div ui-view="details" class=""></div>
</section>
</main>
Lastly, here is the background image directive:
function backImg(){
return {
link: function(scope, element, attrs){
var url = attrs.backImg;
element.css({
'background-image': 'url(' + url +')'
});
}
}
}
angular.module('common').directive('backImg', backImg)