AngularJS 事件

AngularJS 中事件分为两大类：内置事件和自定义事件。在 AngularJS 中，事件可以让开发人员在特定时间采取适当的动作，以加强 AngularJS 程序的交互性和可维护性。

内置事件

AngularJS 中包含了大量内置事件，开发人员可以直接使用这些事件来监听和响应用户的操作。常见的内置事件如下：

ng-click

ng-click 事件用于在用户点击一个元素时触发。

<button ng-click="save()">保存</button>

ng-dblclick

ng-dblclick 事件用于在用户双击一个元素时触发。

<p ng-dblclick="showDetails()">详细信息</p>

ng-submit

ng-submit 事件用于在用户提交表单时触发。

<form ng-submit="submitForm()">
  <input type="text" ng-model="user.name" required>
  <input type="password" ng-model="user.password" required>
  <button type="submit">登录</button>
</form>

自定义事件

除了内置事件之外，AngularJS 还支持自定义事件。自定义事件用于在应用程序中创建和处理自定义的事件。

$broadcast

$broadcast 方法用于向当前作用域及其所有子作用域广播事件。

$scope.$broadcast('eventName', eventData);

$emit

$emit 方法用于向当前作用域及其祖先作用域广播事件。

$scope.$emit('eventName', eventData);

$on

$on 方法用于在作用域上注册事件监听器。

$scope.$on('eventName', function(event, eventData) {
  // 处理事件
});

$rootScope.$broadcast

$rootScope.$broadcast 方法用于向整个应用程序广播事件。

$rootScope.$broadcast('eventName', eventData);

$rootScope.$on

$rootScope.$on 方法用于在全局作用域上注册事件监听器。

$rootScope.$on('eventName', function(event, eventData) {
  // 处理事件
});

案例分析

下面是一个使用 AngularJS 事件的案例。

<div ng-app="myApp" ng-controller="myCtrl">
  <h1>欢迎来到 {{appName}}</h1>
  <button ng-click="showTime()">显示时间</button>
  <div ng-show="time">{{time}}</div>
</div>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $interval) {
  $scope.appName = '我的应用程序';
  $scope.showTime = function() {
    $scope.time = new Date();
  };
  
  $interval(function() {
    $scope.time = new Date();
  }, 1000);
});

在上面的案例中，我们定义了一个控制器，其中使用了 $scope 和 $interval 服务。当用户点击显示时间的按钮时，showTime() 方法会被调用，这个方法会更新 $scope.time 变量。因为 $scope.time 是绑定到视图上的，所以一旦值变化就会立即在页面中展示出来。

另外，我们使用了 $interval 服务，使页面上的时间每秒都会自动更新一次。因为 $interval 是 AngularJS 内置的服务，所以我们可以在控制器中直接调用它。

AngularJS XMLHttpRequest AngularJS 依赖注入