AngularJS 并不直接操作 HTML DOM,而是通过数据绑定和指令来与 HTML DOM 进行交互。AngularJS 的核心思想是通过将模型数据和视图绑定在一起,使数据的变化能够自动反映在视图中,以及用户在视图中的交互能够影响模型数据。

以下是一些 AngularJS 中常用的方式来与 HTML DOM 进行交互:

1. 数据绑定

AngularJS 使用双向数据绑定,通过 ng-model 指令可以将表单元素(如输入框)和模型数据进行双向绑定。
<input type="text" ng-model="username" />
<p>Your username is: {{ username }}</p>

在这个例子中,输入框中的变化会即时反映在页面中的文本。

2. 事件绑定

AngularJS 使用 ng-click 等指令来绑定事件,而不是直接在 HTML 中添加事件监听器。
<button ng-click="doSomething()">Click me</button>

在控制器中定义 doSomething 函数,这个函数将在按钮点击时被调用。
app.controller('myController', function($scope) {
  $scope.doSomething = function() {
    // 处理点击事件的逻辑
  };
});

3. 指令

AngularJS 的指令是通过扩展 HTML 标签或属性来创建的,它们允许你在 HTML 中声明式地添加行为和功能。
<div ng-show="isVisible">This is visible</div>

在这个例子中,ng-show 指令将根据模型中的 isVisible 属性来控制元素的显示与隐藏。

4. 表达式

在 AngularJS 中,可以使用表达式来在 HTML 中插入动态的数据。
<p>{{ message }}</p>

在控制器中,可以更新模型中的 message 属性,从而动态改变页面上的文本。
app.controller('myController', function($scope) {
  $scope.message = 'Hello, AngularJS!';
});

这些是 AngularJS 与 HTML DOM 进行交互的一些主要方式。通过这些机制,你可以实现动态地更新页面内容、响应用户输入、隐藏或显示元素等操作,而无需直接操纵 HTML DOM。


转载请注明出处:http://www.pingtaimeng.com/article/detail/4865/Angular