Coordinates and rotation of elements not loaded by jmpress when triggered using angular $scope.$watch

Question

Use Case

jmpress requires that the DOM be constructed before loading. Using AngularJS, the DOM can be constructed with templates and jmpressinitialized with a directive watching the DOM.

When the data is loaded during DOM loading, i.e. hard coded data and jmpress is triggered on the $(document).ready() event, the desired effect is observed. See jsfiddle.

However, when the data is loaded over an AJAX request and jmpress is triggered over a watch, the coordinates and rotation attributes are ignored by jmpress.

Problem

I suspect that the watch fires before the template is constructed, so jmpress sees that the coordinates and rotations in the DOM are blank.

Question

• Is there a way to get jmpress to use the coordinates and rotations from the DOM created with the angular template?
• Is it just better to add the coordinates and rotations as attributes in the link function rather than using the template?

Code

A jsFiddle using AJAX request is created.

Template

<div ng-app="app" ng-controller="randomData" ui-impress>
    <div ng-repeat="item in data"
         class="step"
         data-duration="2000"
         data-x="{{ item.coordinates.x }}"
         data-y="{{ item.coordinates.y }}"
         data-z="{{ item.coordinates.z }}"
         data-rotate-x="{{ item.rotate.x }}"
         data-rotate-y="{{ item.rotate.y }}"
         data-rotate-z="{{ item.rotate.z }}"
         data-scale="{{ item.scale }}"
    >
        {{ item.message }}
    </div>
</div>

CSS

.step {
    opacity: 0.1;
    width: 20em;
    height: 3em;
}

.step.active {
    -webkit-transition: opacity 1s;
    -moz-transition:    opacity 1s;
    -ms-transition:     opacity 1s;
    -o-transition:      opacity 1s;
    transition:         opacity 1s;

    opacity: 1;
}

Directive

var app = angular.module("app", []);

app.directive('uiImpress', function() {
    return {
        restrict: 'A',
        scope: false,
        link: function($scope, $element) {            
            var init = $scope.$watch('data', function(data) {
                if (data) {
                    $($element).children('.step').each(function(index, step) {
                        $($element).jmpress('init', step);
                    });

                    $($element).jmpress();
                    init();
                };
            });
        }
    };
});

Controller

Basically, just a random data generator.

function randomData($scope, $http) {
    $scope.data;

    var slides = 10;

    var config = {
        coordinates: [ -1000, 1000 ],
        rotate: [ -180, 180 ],
        scale: [ 0.1, 10 ]
    };

    var randomDataSource = "http://api.icndb.com/jokes/random/" + slides;

    function getRandomInt (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function generateData(messages) {
        return _.range(slides).map(function(value, index) {
            return {
                message: messages[index],
                coordinates : {
                    x: getRandomInt.apply(null, config.coordinates),
                    y: getRandomInt.apply(null, config.coordinates),
                    z: getRandomInt.apply(null, config.coordinates)
                },
                rotate: {
                    x: getRandomInt.apply(null, config.rotate),
                    y: getRandomInt.apply(null, config.rotate),
                    z: getRandomInt.apply(null, config.rotate)
                },
                scale: getRandomInt.apply(null, config.scale)
            };
        });
    }

    $http.get(randomDataSource).then(function(response) {
        var messages = response.data.value.map(function(item) {
            return item.joke;
        });
        $scope.data = generateData(messages);
    })
};

Answer 1

In the listener function of the $watch, remove the following code:

$($element).children('.step').each(function(index, step) {
  $($element).jmpress('init', step);
});

Wrap the remaining code in a $evalAsync call:

var unregister = $scope.$watch('data', function(data) {
  if (data) {

    $scope.$evalAsync(function() {
      $($element).jmpress();
      unregister();
    });
  };
});

This delays the code execution until after the DOM has been manipulated by Angular, but before the browser renders.

Demo - $evalAsync: http://jsfiddle.net/CV2JQ/

It's good to know that if you need the code to be executed after the rendering (depends on the plugin) you can instead inject and use the $timeout service:

$timeout(function () {
  $($element).jmpress();
  init();
});

Demo - $timeout: http://jsfiddle.net/c9v9G/

If both alternatives work I prefer the first one as it executes the code before the rendering, which can in some cases remove flickering. In this case it doesn't seem to matter though.