$viewContentLoaded firing before view content is loaded

Question

Here's the shizzle: I have a basic one page angular app where I'm building my portfolio. In controllers I have 3 controllers, and projects is the one I'm having trouble with.

I'm using ng-repeat to get out each project in a list. I'm then targeting them by javascript to resize them correctly.

The thing is that it simply doesn't resize them. They're not loaded before JW.core runs, even if I'm going with $viewContentLoaded as suggested. Hence they are 0px x 0px instead of for example 500 x 500.

I know this since if I set a timeout on the resize function call within JW.core, it's fine. Then each project has been repeated and can be resized accordingly.

I also figured that since I'm pretty new to angular, I'm probably doing something wrong.

controllers.js:

function mainCtrl($scope) {
}

function projectsCtrl($scope, $http) {
  $http.get('data/projects/projects.json').success(function(data) {
        $scope.projects = data;
  });

  $scope.$on('$viewContentLoaded', function () {
      new JW.core();
  });
}

function aboutCtrl($scope, $http) {
  $http.get('data/about/about.json').success(function(data) {
        $scope.about = data;
  });
}

core.js:

var JW = JW || {};

JW.core = function() {

    var initialise = function () {
            new JW.elementDimensions();
        };

    initialise();

};

elementdimensions.js:

var JW = JW || {};

JW.elementDimensions = function () {

    var scrollbarWidth,
        resizeDim = function (e, ww, wh) {

            var wh = window.innerHeight;    

            $(e).width(ww + 'px');
            $(e).height(wh + 'px');

        },

        initialise = function () {

            var ww = window.innerWidth - scrollbarWidth,
                $targets = $('#projects').find('.project');

            $('.project-wrapper').width((window.innerWidth - scrollbarWidth) * $targets.length);
            $('.project-wrapper').height(window.innerHeight);

            _.each($targets, function(e) {
                resizeDim(e, ww);
                console.log(e);
            })

        };


    initialise();

    $(window).on('resize', function() {
        initialise();
    });

    return this;

};

and the view:

    <div class="project" ng-repeat="project in projects">

        <div class="project-img" style="background: url('{{project.imageUrl}}') fixed;" id="{{project.id}}">
            <div class="info-container">
                <h1>{{project.title}}</h1>
                <p class="description">
                    {{project.description}}
                </p>
                <div class="tags">
                    <ul>
                        <li ng-repeat="tag in project.tags">{{tag}}</li>
                    </ul>
                </div>
                <a class="goto" href="{{project.link}}">{{project.linktext}} →</a>
            </div>
        </div>

    </div>

Answer 1

What you're going to want to do is use resolve on your route.

$routeProvider.when('/products', {
    templateUrl: 'products.html',
    controler: 'productsCtrl',
    resolve: {
        products: ['$http', '$q', function($http, $q){
            var deferred = $q.defer();
            $http.get('data/projects/projects.json').success(function(data) {
                deferred.resolve(data);
            });
            return deferred.promise;
        }]
    }
});

Then, in your controller, inject $scope and products instead of $scope and $http, unless you also need $http for anything else once the controller is running, in which case just add products. What this will do essentially is delay the initialization of the controller until the content is loaded.