event $viewContentLoading doesn't seem to work

[dmatteo]

It seems I'm unable to get the $viewContentLoading fired.

The doc says it's fired by the $rootScope, while in the example listen to the $scope

$scope.$on('$viewContentLoading', 
function(event, viewConfig){ 
    // Access to all the view config properties.
    // and one special property 'targetView'
    // viewConfig.targetView 
});

I've tried both, but I couldn't catch any event

[laurelnaiad]

If you haven't already, double check that your controller is being instantiated and/or listen for $stateChageError from your run function.

[dmatteo]

I can surely tell that the controller gets istantiated because in this code

        $scope.$on('$viewContentLoading',
            function(event, viewConfig){
                console.log('content loading: ', event, viewConfig)
            });

        $scope.$on('$viewContentLoaded',
            function(event){
                console.log('content loaded: ',event)
            });

The event $viewContentLoaded gets fired, while the $viewContentLoading gets not

I'm experiencing this problem with Angular 1.2.2 as well as 1.2.5

[timkindberg]

I actually couldn't this to work at all either. I think it may be just plain broke.

[gustavohenke]

Not really broken. I think.

Take a look at this line.
This is the only place where $view.load is called (with notify: false), and $view.load is the only emitter of $viewContentLoading event.

[vicentereig]

@dmatteo The $viewContentLoading is broadcasted before the controller gets instantiated and the promises in the state resolved.
Therefore if you setup the $viewContentLoading and $viewContentLoaded delegate from the controller that is attached to the state you're visiting , it will receive only the $viewContentLoaded update.

Long story short:

UsersController instantiated.
content loaded!

.state('users', { 
  controller: UsersController, 
  resolve: { 
    users: function() {
       return [ /* ... */  ];
    }
  }
});

function UsersController($scope) {
   console.log("UsersController instantiated");

  $scope.$on('$viewContentLoading', function(event, viewConfig){
     console.log('content loading: ', event, viewConfig)
  });

  $scope.$on('$viewContentLoaded', function(event){
    console.log('content loaded!')
  });
}
app.controller('UsersController', ['$scope', UsersController]);

You can instantiate a parent controller right in your view and setup the view loading delegate.

 <div class="users" ng-controller="LoadingIndicatorController">
   <div class="contents" ui-view></div>
</div>

function LoadingIndicatorController($scope) {
    console.log("LoadingIndicatorController instantiated");
    $scope.$on('$viewContentLoading',function(event, viewConfig){
        console.log("Contents will load.");
    });

    $scope.$on('$viewContentLoaded',function(event, viewConfig){
        console.log("Contents did load.");
    });
}

app.controller('LoadingIndicatorController', ['$scope', LoadingIndicatorController]);

That even doesn't work because of the issue that @gustavohenke points out. I still had to hack a options.notify = true in https://github.com/angular-ui/ui-router/blob/0.2.7/src/view.js#L19 when name == "@". @timkindberg any thoughts there?

[timkindberg]

Therefore if you setup the $viewContentLoading and $viewContentLoaded delegate from the controller that is attached to the state you're visiting , it will receive only the $viewContentLoaded update.

@vicentereig Are you saying this is how it currently works, or how it should work?

My gut is that this is just broken on accident, but perhaps someone set notify to false for a different reason, not realizing it would stop the $viewContentLoading event from firing. I'm also not completely sure I even understand why and when you'd even need the $viewContentLoading event!

[xdhmoore]

+1

[vicentereig]

@timkindberg Sorry for the late reply.

What I mean is that this is how it currently works. To recap:

1. $viewContentLoading gets broadcasted
2. Dependencies under the resolve section are resolved
3. Controller gets instantiated and resolve dependencies injected.
4. $viewContentLoaded is emitted.
5. The controller reacts to $viewContentLoaded (when it is setup as the delegate to dispatch those events of course).

I've got some views that take a little while to load the data from the server (sometimes ~1 second), so I wanted to show a loading indicator while transitioning from one route to another.

I'm aware of other ways to render it while loading the data. But if routes are responsible of defining the UI state by putting together the controller, template, and data coming from the resolve section, I find it natural to let them notify whoever wants to listen it to it about the current status of the loading process.

My use case

My use case is a Master-Detail view drilldown interaction. Let's say I've got the following ui-views set up. The detail view is a child of the collection view rendering user names in this case.

+-----------------------------------------+
| user 1 |  user 1 details view          | 
| user 2 |                               | 
| user 3 |                               | 
| user 4 |                               | 
| user 5 |                               | 
| user 6 |                               | 
+-----------------------------------------+

Maybe I'm missing something, but when I first point the browser #/users/1 ideally I'd expect the following to happen:

1. users parent route resolves the promises and injects the result on the controller associated to that state.
2. The Collection View gets rendered while users.show is still idle getting data from the sever (this is the API call that sometimes takes up to a second to load).
3. The detail view renders a loading indicator.
4. The resolve section in users.show finally gets a 200 OK from the server, injects the dependencies in the controller.
5. So I can finally render the user's detail.

Talk you soon,
Vicente.

[timkindberg]

Yes, the use case makes sense now. Hopefully we'll be able to get to this in 0.4.0.

[ivandotv]

+1

[ryanmillerdev]

+1

[hesalx]

+1

[yasar]

Facing with the same issue due to exact same reason. so, another +1.

[dagilleland]

+1 - in fact, handling $viewContentLoading is a core need in my using dynamic templateUrls, since I need to do a bit of post-processing on the load and wanted it to happen before it's placed in the view.

[favio41]

+1 For me the event isn't trigger the first time, after that perfect. Anybody have a hack for this? cheers.