在 Chrome 中调试 AngularJS
我们将介绍如何在 Chrome 中调试 AngularJS。
在 Chrome 中调试 AngularJS
假设我们正在使用 AngularJS 中的结构，我们已经解决了在 AngularJS 结构中有复选框的情况。在提交表单之前，你需要检查假设客户已选择（或限制）其中一个复选框。
在这里，我们将告诉你检查是否有任何复选框被选中或不受 AngularJS $scope 限制的理想方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="angApp" ng-controller="angController">
<div>
<input type="text" ng-model="myname" id="myname" />
</div>
</div>
</body>
<script>
var angApp = angular.module('angApp', []);
angApp.controller('angController',
['$scope', function () {
} ]
);
</script>
</html>
输出：
在程序控制中心组件的 $scope 入口处，我们需要在控制台窗口中编写此代码。
angular.element($0).scope();
我们可以运行应用程序，在那个浏览器中，我们将按 F12 到那个浏览器窗口。我们可以做的第一件事是打开并选择 Element 选项卡，然后选择我们要调试的组件。
我们可以看到上面示例中唯一的元素。因此，我们可以单击输入元素，然后在窗口中，我们可以编写以下脚本并输入它。
angular.element($0).scope();
通过在 Element 选项卡中选择组件，我们将组件的数据或其引用放在 $0 中。这是一个变量。
我们需要记住，在访问元素 $scope 之前，我们必须通过单击它来选择元素。
我们会注意到，使用控制台 IntelliSense 来查看程序提供的不同技术和属性将有助于我们更深入地了解应用程序。
AngularJS 中的 querySelector() 方法
然而，还有另一种方法可以做到这一点，而不是使用 $0 变量。我们可以利用文档中的 .querySelector() 方法。
document.querySelector("input"); angular.element(document.querySelector("input")).scope();
为 AngularJS 赋值
现在，我们将从控制台分配和修改输入框元素内的值。例如，我们希望在该框中显示名称。
angular.element($0).scope().name = 'Subhan';
确实，以这种身份没有发生任何事情。输入框仍然是空的。
所有这些都将按照实际控制台中的名称所示完成。它表明该值在 Chrome 中为红色。
然而，我们需要信息框中的值。我们需要将 $apply() 方法添加到 $scope 以反映浏览器窗口中的实际更改。
angular.element($0).scope().$apply();
我们需要按 Enter 键才能在浏览器的输入框中看到值框 Subhan。我们还可以在我们的 App 中添加其他控件，比如一个按钮来进行一些验证，以检查我们在输入框中输入的文本或值。
结论
正如我们上面所讨论的，只是知识量较少。我们可以使用 JS 控制台中的浏览器做更多事情，这将有助于测试和检查我们的 AngularJS 应用程序。
我们可以访问元素、属性和数据来访问 $scope 变量并将值分配给变量。
相关文章
在 Angular 中上传文件
发布时间：2023/04/14 浏览次数：71 分类：Angular
-
本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条，并在上传完成时显示文件上传完成消息。
Angular 中所有 Mat 图标的列表
发布时间：2023/04/14 浏览次数：91 分类：Angular
-
本教程演示了在哪里可以找到 Angular 中所有 Mat 图标的列表以及如何使用它们。
Angular 2 中的复选框双向数据绑定
发布时间：2023/04/14 浏览次数：139 分类：Angular
-
本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。
在 AngularJS 中重新加载页面
发布时间：2023/04/14 浏览次数：142 分类：Angular
-
我们可以借助 windows.location.reload 和 reload 方法在 AngularJS 中重新加载页面。
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间：2023/04/14 浏览次数：78 分类：Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 AngularJS 中启用 HTML5 模式
发布时间：2023/04/14 浏览次数：150 分类：Angular
-
本文讨论如何在 AngularJS 应用程序上启用带有深度链接的 HTML5 模式。
在 AngularJs 中加载 spinner
发布时间：2023/04/14 浏览次数：107 分类：Angular
-
我们将介绍如何在请求加载时添加加载 spinner，并在 AngularJs 中加载数据时停止加载器。
在 Angular 中显示和隐藏
发布时间：2023/04/14 浏览次数：78 分类：Angular
-
本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时，我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。
在 Angular 中下载文件
发布时间：2023/04/14 浏览次数：104 分类：Angular
-
本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。
