bboisvert bboisvert - 3 months ago 25
AngularJS Question

How to wait for Meteor subscription before launching angular app


  • I am using angular-meteor with pascalprecht.translate

  • the translations object have to be stored in the database in order that some users can modify the translations via a back-office

  • I subscribe the collection containing the translations and loads them in the .config()

  • it works well BUT when loading the application the page is rendered before the subscription is ready.an during a short period of time the texts are not translated.

  • I have to do something in order that we always see translations even during the begining



My question is the following:
Is it possible to make angular wait for the subscription to be ready before it is launched ?

Best regards

bboisvert

angular.module('test').config(['$translateProvider', function ($translateProvider) {

Meteor.subscribe('settings', function(){
test = Settings.findOne({name: "translations"});
$translateProvider.translations('fr-FR', test['fr-FR']);
$translateProvider.translations('en-EN', test['en-EN']);
});

}]);

Answer

In the Meteor.subscribe callback, you could do $rootScope.$broadcast('meteorSubscribed')

on your root-level directive/controller listen for it and set a $scope variable to say it is loaded. You could then use that variable for ng-if or ng-show

example:

$scope.$on('meteorSubscribed', function(){
    $scope.meteorReady = true;
});

in template:

<div ng-app="test" ng-controller="RootController" ng-show="meteorReady">
    <!-- your app here -->
</div>

You could also circumvent the whole event + controller setup and just set $rootScope.meteorReady = true; right in the Meteor.subscribe callback. Really depends on the setup of your app.

Comments