如何在Angular Js中加载DOM后运行Jquery

发布时间：2020-12-17 17:39:58 所属栏目：安全来源：网络整理

导读：我使用angular创建了一个单页应用程序(多个)视图,可以加载不同的页面内容.我想在整个使用角度脚本的情况下为所有屏幕的第一个输入元素应用初始焦点,而不是在每个页面表单元素中使用自动焦点属性. 有没有办法做到这一点？和我们如何知道Angular视图(DOM)是

我使用angular创建了一个单页应用程序(多个)视图,可以加载不同的页面内容.我想在整个使用角度脚本的情况下为所有屏幕的第一个输入元素应用初始焦点,而不是在每个页面表单元素中使用自动焦点属性.

有没有办法做到这一点？

和

我们如何知道Angular视图(DOM)是否已完全加载？

解决方法

从MainCtrl,您可以在加载角度视图时监听事件.

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!