AngularJS: $viewContentLoaded fired before partial view appears

by

This is related to angular digest cycle, it’s about how angular works underneath the hood, data binding etc. There are great tutorials explaining this.

To solve your problem, use $timeout, it will make the code execute on the next cycle, whem the ng-if was already parsed:

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

Fixed demo here: http://codepen.io/anon/pen/JoYPdv

But I strongly advise you to use directives do any DOM manipulation, the controller isn’t for that.
Here is a example of how do this:
Easy dom manipulation in AngularJS – click a button, then set focus to an input element

More Related Contents:

  1. How can I run a directive after the dom has finished rendering?
  2. jQuery find events handlers registered with an object
  3. What is the difference between jQuery: text() and html() ?
  4. jQuery – Trigger event when an element is removed from the DOM
  5. Update Angular model after setting input value with jQuery
  6. Get an element by index in jQuery
  7. AngularJS + JQuery : How to get dynamic content working in angularjs
  8. jQuery event for images loaded
  9. Rotating a Div Element in jQuery
  10. ng-click not working from dynamically generated HTML
  11. jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
  12. from jquery $.ajax to angular $http
  13. JQuery to check for duplicate ids in a DOM
  14. AngularJS: How to run additional code after AngularJS has rendered a template?
  15. jQuery ui datepicker with Angularjs
  16. jQuery: select an element’s class and id at the same time?
  17. How do I get the entire page’s HTML with jQuery?
  18. angular.element vs document.getElementById or jQuery selector with spin (busy) control
  19. Events not registering after replaceWith
  20. Iterating over element attributes with jQuery
  21. How to subtract two angularjs date variables
  22. Finding the id of a parent div using Jquery
  23. How do I get the offset().top value of an element without using jQuery?
  24. jQuery and AngularJS: Bind Events to Changing DOM
  25. How to get form html() via jQuery including updated value attributes?
  26. Dynamically adding HTML form field using jQuery
  27. Problems with jQuery autocomplete + AngularJS
  28. Using jQuery’s $.ajax within an angularJS controller
  29. How to destroy a DOM element with jQuery?
  30. addClass and removeClass in jQuery – not removing class

Leave a Comment