$viewContentLoaded does not trigger

michahell commented 9 years ago

Am I forgetting something trivial related to the use of ui-router, or somehow some other trivial thing? I was using the default angular router when I switched to ui-router. I then wanted to know how I could keep several views open, and landed on your 'sticky' router properties, awesome!

This relevant part is in my main HTML file that is being served by node-webkit:

<body ng-app="pinboredWebkitApp">

    <div ng-include src="'views/partials/mainnav.html'" ng-controller="MainNavCtrl" ng-show="showNav" 
    class="navbar navbar-default navbar-static-top" role="navigation"></div>

    <div class="viewcontainer" ui-view="login" ng-show="$state.includes('login')"></div>
    <div class="viewcontainer" ui-view="overview" ng-show="$state.includes('overview')"></div>
    <div class="viewcontainer" ui-view="tags" ng-show="$state.includes('tags')"></div>
    <div class="viewcontainer" ui-view="tools" ng-show="$state.includes('tools')"></div>
    <div class="viewcontainer" ui-view="settings" ng-show="$state.includes('settings')"></div>

   ... loads of script tags....

</body>

My app.js looks like this:

angular
  .module('pinboredWebkitApp', [
    'ngAnimate',
    'ngResource',
    'ngSanitize',
    'ui.router',                  // angular ui router
    'ui.bootstrap',               // angular ui bootstrap
    'ct.ui.router.extras.core',   // angular ui bootstrap extras core
    'ct.ui.router.extras.sticky', // angular ui bootstrap extras sticky states
   ... some other dependancies....
  ])
  .config(function($stateProvider, $stickyStateProvider, $urlRouterProvider) {

    // $stickyStateProvider.enableDebug(true);

    // For any unmatched url, redirect to /overview
    $urlRouterProvider.otherwise("/overview");

    // Now set up the states
    $stateProvider

      .state('login', {
        url: '/login',
        sticky: true,
        views: {
          'login': {
            templateUrl: 'views/login.html',
            controller: 'LoginCtrl',
          }
        }
      })

      .state('overview', {
        url: '/overview',
        sticky: true,
        views: {
          'overview': {
            templateUrl: 'views/overview.html',
            controller: 'OverviewCtrl',
          }
        }
      })

      .state('tags', {
        url: '/tags',
        sticky: true,
        views: {
          'tags': {
            templateUrl: 'views/tags.html',
            controller: 'TagsCtrl',
          }
        }
      })

      .state('tools', {
        url: '/tools',
        sticky: true,
        views: {
          'tools': {
            templateUrl: 'views/tools.html',
            controller: 'ToolsCtrl',
          }
        }
      })

      .state('settings', {
        url: '/settings',
        sticky: true,
        views: {
          'settings': {
            templateUrl: 'views/settings.html',
            controller: 'SettingsCtrl',
          }
        }
      });

  })

  .run(function ($rootScope, $state) {
    $rootScope.$state = $state;
  });

Then, finally, in my overview controller I have the following event listener at the bottom:

$scope.$on('$viewContentLoaded', function() {
      console.info('overview $viewContentLoaded called');

      // repopulate bookmark items.
      $scope.repopulateBookmarks();
    });

The code in that event listener is not being executed the first time the application loads. The first page that is being loaded is my login view. after the login has completed, this is how I load the overview view (and thus controller):

$location.path('/overview');

It must somehow be related to what happens when, as I also use the $viewContentLoaded event in my login controller, and the code that is in the event listener there DOES get executed.

halp!

christopherthielen commented 9 years ago

Yeah, I can see why that won't work for you. That event isn't the appropriate trigger to load data (even in stock ui-router). Load data when your controller is invoked, or even better, using a state resolve block.

michahell commented 9 years ago

Okay, I believe I also solved it this way :) Thanks for clearing this up!

christopherthielen / ui-router-extras

$viewContentLoaded does not trigger #244