$viewContentLoaded isn't firing

Question

$viewContentLoaded never fires in my Angular controller. The following:

function MyController($scope)
{
    $scope.$on('$viewContentLoaded', function()
    {
        alert("blah");
    });
}

Never hits a breakpoint, and never pops up the alert. I think this is pretty standard use, so I'm not sure what it could be, but it's definitely not firing. Everything else in the controller is behaving properly.

What would cause this?

Answer 1

Try this instead:

  function MyController($scope)
    {
        $scope.$watch('$viewContentLoaded', function()
        {
            alert("blah");
        });
    }

Answer 2

Base on your comment above, it sounds like you have something like this:

<ng-view>
   <div ng-controller="MyController"></div>
</ng-view>

I'm not sure what content in the ng-view tag will do, but the $viewContentLoaded is emitted from the ng-view scope. This means, it only goes up from the ng-view and thus your controller would never catch it.

Answer 3

I solved this by specifying the controller in the app.js route provider rather than using ng-controller in a div in the view. I only use this method if I need to use $viewContentLoaded, otherwise I use ng-controller.

angular.module('myapp', [...])
.config(function ($routeProvider, $locationProvider) {
   $routeProvider
      .when('/MyRoute', {templateUrl: 'views/MyView.html', controller: MyController})
  });