All geek questions in one place

How to start jquery after loading the DOM in Angular Js

I created a one-page application (of several) views using angular, which loads various page content. I would like to apply the initial focus for the first input element for all screens throughout the use of the angular script instead of using the autofocus attribute in each element of the page form.

Is there any way to do this?

and

How do we know if the angular view (DOM) is fully loaded or not?

+4
source share
1 answer

In MainCtrl, you can listen to the event when loading the angular view.

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>
Run codeHide result
+4
source

Source: https://habr.com/ru/post/1661181/

More articles:


All Articles