Передача данных между контроллерами во время инициализации с помощью $ rootScope. $ Emit

Question

У меня есть общий модуль с комбо-контроллером, компонентом и шаблоном для целей инициализации и определения базового макета приложения.Затем у меня есть компонент с состоянием, который при инициализации делает HTTP-запросы GET для получения фонового изображения из API.Как только обещание выполнено, я использую $ rootScope. $ Emit для запуска события обратно на общий контроллер с URL-адресом изображения, чтобы его можно было динамически установить в качестве фонового изображения приложения.

Что яя не могу сообразить, что когда консоль регистрирует ответ на событие внутри функции $ rootScope. $ on () показывает мне результат, но где-нибудь еще внутри контроллера ничего не дает (внутри $ onInit () или где-либо еще).

Что еще более удивительно, так это то, что я могу без проблем отобразить данные события в шаблоне контроллера Common, будь то внутри поля ввода с моделью ng или внутри абзаца.Однако, когда я пытаюсь объединить его как часть моей встроенной директивы CSS или background-image, она не берется вообще.Директива возвращает URL-адрес вплоть до имени переменной (https://image.tmdb.org/t/p/original), затем обрезается.

Любые предложения будут действительно очень полезны!

Это код контроллера компонента:

function MovieDetailController(MovieService, $rootScope){

    var ctrl = this;
    ctrl.$onInit = function(){

    // Get all 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)

А это код Common Controller

function CommonController($state, $rootScope){

    var ctrl = this;

    $rootScope.$on('backdropChange', function(event, data){
        ctrl.backdrop = data;
        // Displays result successfully
        console.log('Back drop is ' + ctrl.backdrop);
    });

    ctrl.$onInit = function(){
        // Doesn't log result
        console.log('On Init, Backdrop is ' + ctrl.backdrop);
    }
}

angular
    .module('common')
    .controller('CommonController', CommonController);

Вот HTML-шаблон для 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>

Последняя, ​​но не менее важная директива фонового изображения

function backImg(){
    return {
        link: function(scope, element, attrs){
            var url = attrs.backImg;
            element.css({
                'background-image': 'url(' + url +')'
            });
        }
    }
}

angular
    .module('common')
    .directive('backImg', backImg);

Answer 1

Директива backImg должна $observe атрибут:

function backImg(){
    return {
        link: function(scope, element, attrs){
            attrs.$observe("backImg", function(url) {
                element.css({
                    'background-image': 'url(' + url +')'
                });
            });
        }
    }
}

Из документов:

$ Наблюдать (ключ, fn);

Соблюдает интерполированный атрибут.

Функция наблюдателя будет вызываться один раз во время следующего $digest после компиляции. Затем наблюдатель вызывается всякий раз, когда изменяется интерполированное значение.

- Справочник по API атрибутов AngularJS - $ наблюдение