AngularJS: $ viewContentLoaded, выпущенный до частичного просмотра

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

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

Это выглядит так:

• Как я могу определить, возвращает ли селектор null?
• Окно jQuery UI Dialog, загруженное в AJAX-стиль jQuery UI Tabs
• Как получить предыдущий URL страницы с помощью jquery
• fancy box работает с iframes в функции beforeShow?
• JavaScript console.log вызывает ошибку: «Синхронный XMLHttpRequest в основном streamе устарел ...»

 angular.module('docinvoiceClientAngularjsApp') .controller('LoginController', function ($scope, $rootScope) { $scope.$on('$viewContentLoaded', function(event) { console.log("content loaded"); console.log($("#loginForm")); // breakpoint here }); [...] 

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

Поскольку я использую ui-router и ui-view , я дам вам отрывок файла маршрутизации:

 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 выглядит следующим образом:

 
 
 [...] 

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

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

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

 app.controller('LoginController', function ($scope, $timeout) { $scope.$on('$viewContentLoaded', function(event) { $timeout(function() { $scope.formData.value = document.getElementById("loginForm").id; },0); }); }); 

 app.directive('myDir', function () { return { restrict: 'A', link: function (scope, element) { // Do manipulations here with the help of element parameter } }; }); 

 'use strict'; app.factory('viewContentLoaded', function($q, $rootScope, $timeout) { var viewContentLoaded = $q.defer(), foo = function() { $timeout(function() { viewContentLoaded.resolve(); // Get all entries }, 100);//Timeout }, checkViewContenLoadedListner = $rootScope.$on('$viewContentLoaded', foo);//Rootscope return { getLoaded: function() { return viewContentLoaded.promise; }, removeViewContenListner: function() { //Remove event listern on $viewContentLoaded no $off so call it will unsubscribe it //$rootScope.$off('$viewContentLoaded', foo);//Rootscope //Don't forget to unsubscribe later checkViewContenLoadedListner(); } }; });