CODEWITHSUNDEEP
jqueryangularjs
klmuralimohan
klmuralimohan

Reputation: 931

How to run Jquery after DOM is loaded in Angular Js

I have created a single page application (multiple) views using angular that loads different page content. I would like apply initial focus for the first input element for all the screens throughout using angular script rather than using autofocus attribute in each and every page form element.

Is there any way to do this?

and

How do we know whether Angular view (DOM) is completely loaded or not?

Upvotes: 6

Views: 2947

Answers (1)

Gaurav Srivastava
Gaurav Srivastava

Reputation: 3232

From MainCtrl you can listen the event when angular view is loaded.

angular.module('app', [])
  .controller('Controller', function($scope) {

    angular.element(document).ready(function() {
      $('form').find('input[type=text],textarea,select').filter(':visible:first').focus();
    });

  })

.controller('childController', function($scope) {
  
  })
<!DOCTYPE html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="Controller">
    <div>
      <div ng-controller="childController">
        <form name="myForm" id="myForm">
          <label>Field1</label>
          <input type="text" ng-model="first" ng-required="true" />
          <br>
          <label>Field2</label>
          <input type="text" ng-model="second" ng-required="is_mobile" />
        </form>
      </div>
    </div>
    <br>

  </div>
</body>

</html>

Upvotes: 6

Related Questions