Обозреватель LiveData onChanged не вызывается

В случае, если другие в конечном итоге хотят выполнить анимацию при изменении фонового изображения, я опубликую то, что я использовал.

В этой директиве предполагается, что он прикреплен к шаблону, подобному этому:

<!-- Full screen background image and scarecrow for onload event-->
<div class="full-screen-image" data-background-image="{{backgroundImageUrl}}"></div>
<img class="hidden-full-screen-image hidden" data-ng-src="{{backgroundImageUrl}}"></div>

Мы хотим установить источник фонового изображения для <div>, но прикрепите событие onload, чтобы мы знали, когда пришло новое изображение. Для этого мы используем <img> с классом .hidden, который имеет .hidden {display: none;}. Затем мы используем следующую директиву, чтобы динамически установить источник фонового изображения div и выполнить выцветание на белый, а затем обратно с белого на изменение изображения:

/***
*
* Directive to dynamically set background images when 
* controllers update their backgroundImageUrl scope
* variables
*
* Template: <div data-background-image="{{backgroundImageUrl}}" />
*   AND     <img data-background-image="{{backgroundImageUrl}}" class="image-onload-target hidden" />
*
***/

var angular = require('angular');

angular.module('BackgroundImage', [])
  .directive('backgroundImage', [
    "$timeout",
  function ($timeout) {
  return function(scope, element, attrs){
    attrs.$observe('backgroundImage', function(value) {

      /***
      *
      * Define a callback to trigger once the image loads.
      * The value provided to this callback = the value
      * passed to attrs.$observe() above
      *
      ***/

      var imageLoadedCallback = function(value) {
        // once the image load event triggers, remove the event
        // listener to ensure the event is called only once
        fadeOut();
        target.removeEventListener('load', imageLoadedCallback);
        $timeout(function() {
          fadeIn(value);
        }, 700);
      }

      /***
      *
      * Define fade in / out events to be called once a new image
      * is passed to the attrs.backgroundImage in the directive
      *
      ***/

      var fadeOut = function() {
        element.css({'opacity': '0'})
      };

      var fadeIn = function(value) {
        element.css({
          'background': 'url(' + value +') no-repeat center center fixed',
          'background-size' : 'cover',
          'opacity': '1'
        });
      };

      // add an onload event to the hidden-full-screen-image
      var target = document.querySelector('.image-onload-target');
      target.addEventListener('load', imageLoadedCallback(value));

    });
  };
}]);

Работа с Angular заставляет меня любить. .