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 после того, как частичное представление будет готово.
Вы можете найти рабочую демонстрацию здесь:демонстрация