AngularJS: $ viewContentLoaded срабатывает до появления частичного представления

Для частичного просмотра я хочу сделать некоторые вещи JavaScript, с которыми я обычно делаю$(document).ready(function() {...})например, привязать слушателей venet к элементам. Я знаю, что это не работает для AngularJS и частичных представлений, загруженных в «корневое» представление.

Таким образом, я добавил слушателя к контроллеру, который слушает$viewContentLoaded событие. Вызывается функция слушателя, поэтому событие вызывается, но мне кажется, что это происходит до того, как будет отображено частичное представление. Также я не вижу элементов, когда я устанавливаю точку останова в функции слушателя и отлаживаю ее с помощью firebug, а также выбор jquery внутри функции не находит элементы частичного представления.

Вот как выглядит контроллер:

angular.module('docinvoiceClientAngularjsApp')
  .controller('LoginController', function ($scope, $rootScope) {

$scope.$on('$viewContentLoaded', function(event) {
  console.log("content loaded");
  console.log($("#loginForm"));   // breakpoint here 
});

[...]

Я предполагаю, что я делаю что-то не так, потому что должно быть больше сообщений в stackoverflow, если это распространенная ошибка.

Как я используюUI-маршрутизатор а такжещ-видЯ дам вам выдержку из файла маршрутизации:

angular
  .module('docinvoiceClientAngularjsApp', [
    'ui.router',
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngMessages',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
 .config(function ($routeProvider, $stateProvider) {
    $stateProvider
    .state('login', {
        url: '/',
        templateUrl: 'components/login/loginView.html',
        controller: 'LoginController'
    })
    .run(['$state', function ($state) {
        $state.transitionTo('login');
    }])

 [...]

Любая помощь приветствуется. Спасибо и добрые пожелания

ОБНОВЛЕНИЕ 1: Я сократил ошибку до следующего варианта использования: loginView.html выглядит следующим образом:

<div id="loginContainer" style="width: 300px">
  <form id="loginForm" ng-submit="login(credentials)" ng-if="session.token == undefined">

[...]

Как только я удалюng-if из тега div он работает как положено. Событие запускается после рендеринга DOM, поэтому jQuery находит элемент. Еслиng-if прикреплен к тегу div, поведение такое, как описано выше.

ОБНОВЛЕНИЕ 2: Как и было обещано, я добавил рабочую демонстрацию, которая показывает другое поведение при добавленииng-if директивы. Кто-нибудь может указать мне правильное направление? Не придерживайтесь формы входа в систему как таковой, поскольку существует много других случаев, когда я хочу удалить определенные части представления на основе какого-либо выражения и выполнить некоторые вещи JavaScript после того, как частичное представление будет готово.

Вы можете найти рабочую демонстрацию здесь:демонстрация

Ответы на вопрос(3)

Ваш ответ на вопрос