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

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

Таким образом, я добавил слушателя к controllerу, который прослушивает событие $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-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 после частичного представления.

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

Это связано с угловым циклом дайджеста, речь идет о том, как угловые работы под капотом, привязка данных и т. Д. Есть большие учебники, объясняющие это.

Чтобы решить вашу проблему, используйте $ timeout, это сделает код выполненным в следующем цикле, если ng-if уже был разобран:

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

Исправлена ​​демо: http://codepen.io/anon/pen/JoYPdv

Но я настоятельно рекомендую вам использовать директивы для любых манипуляций с DOM, controller не для этого. Вот пример того, как это сделать: легкая манипуляция dom в AngularJS – нажмите кнопку, затем установите фокус на элемент ввода

Я решил эту проблему с помощью директив. Добавьте один директиву в свой элемент (например,

) и выполните манипуляции с элементом в соответствующей директиве следующим образом:

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

Я также пробовал события государственного провайдера, такие как $stateChangeSuccess , $viewContentLoaded но не смог решить проблему. Потому что после того, как эти события были уволены, требуется время для рендеринга в DOM.

Таким образом, мы можем следовать этому подходу, который дает отличные результаты и правильный способ реализации в Angular JS 🙂

Это ответ Аиду немного поздно, но может помочь кому-то другому. Я настраиваю службу, которую позже позвоню с controllerа или директивы.

 '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(); } }; }); 
  • Как получить высоту полного содержимого div с помощью jQuery?
  • Плагин Aptana для Eclipse и jQuery
  • JQuery JQGrid - Как установить выравнивание ячеек заголовка сетки?
  • jQuery CSS - запись в -tag
  • jquery проверить, если он нажат или нет
  • Невозможно правильно настроить HTTP-заголовок Accept с помощью jQuery
  • Почему сценарий Ajax не работает на сервере IIS 7.5 Win 2008 R2?
  • ненавязчивая проверка клиента с использованием fluentvalidation и asp.net mvc LessThanOrEqualTo не стрелять
  • Событие JQuery click работает только один раз
  • jQuery 1.4.2 VSDoc
  • Как выглядит запрос автозаполнения / сервера?
  • Interesting Posts

    Как отключить предварительный просмотр миниатюр панели задач Windows 7?

    Android: как установить событие onClick для кнопки в элементе списка в ListView

    Как подсчитать целые числа между большими A и B с определенным свойством?

    Недостатки MARS (несколько активных наборов результатов)?

    jQuery validate: Как добавить правило для проверки правильности выражения?

    Visual Studio действует странно. Как это исправить?

    Восстановить данные с диска, который был отформатирован на низком уровне

    Есть ли тип ввода float в HTML5?

    Рассчитать разницу во времени / времени в java

    Android getOrientation Azimuth загрязняется, когда телефон наклонен

    Android: как обновить содержимое ListView?

    Получение URL-адреса хеша и использование его в jQuery

    Оставить скрипт bash на удаленном терминале, пока он не вошел в систему?

    Android getIntent (). GetExtras () возвращает null

    Кнопка блока питания Thermaltake не останется в положении «включено»

    Давайте будем гением компьютера.