CODEWITHSUNDEEP
javascriptangularjsrace-condition
jraede
jraede

Reputation: 6896

Fix race condition with independent AngularJS controller

In my Angular application I have a main view that changes according to the route, and then a sidebar that is displayed no matter what. My HTML looks like this:

<div id="container">
    <div id="sidebar" ng-controller="SidebarCtrl">(sidebar code)</div>
    <div ng-view id="content">Loading...</div>
</div>

And the javascript is loaded in this order:

  1. Vendor.js (angular, etc)
  2. App.js (my application)

The SidebarCtrl is defined in App.js. However right when Angular loads it sees the ng-controller directive and tries to assign it to the sidebar right off the bat, leading to a "argument SidebarCtrl is not a function" error unless app.js is cached. I was thinking of having the sidebar in a separate file and loading it before Vendor.js, but the sidebar is dependent on some services defined in App.js (namely, my custom auth service):

MyApp.controller('SidebarCtrl', 
['$scope', '$location', 'auth', function($scope, $location, auth) {
    (...)
}])

So either way I'm at a loss.

I'm sure there is a better way of setting this up...any ideas? Can I define SidebarCtrl as a simple function but still have access to the auth service?

Thanks

Upvotes: 0

Views: 948

Answers (1)

musically_ut
musically_ut

Reputation: 34288

You can dynamically add the ng-controller attribute to the sidebar when your app loads:

var $self = angular.element('.sidebar');
$self.attr('ng-controller', window.USER_LOGGED_IN ? 'sidebarCtrl' : 'noUserCtrl');
angular.bootstrap(angular.element('body'));

This method is useful when the controller to be used depends on the application state. In your case, angular.bootstrap should do the trick.

Source

Upvotes: 1

Related Questions