AngularJS 模型关系

简介

AngularJS 是一个流行的前端框架，可以轻松地构建复杂的单页面应用程序。在 AngularJS 中，模型是非常重要的组成部分，因为它们为应用程序提供了数据和状态。在本文中，我们将深入探讨 AngularJS 模型之间的关系。

$scope

$scope 是 AngularJS 中最基本的模型对象。它是一个 JavaScript 对象，负责管理视图和控制器之间的通信。每个控制器都有自己的 $scope 对象，并且可以通过继承或创建新的 $scope 对象来实现不同层次的作用域。

示例代码

var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
  $scope.message = "Hello World!";
});

在上面的示例中，我们定义了一个名为 MyController 的控制器，并注入了 $scope 依赖项。然后，我们在 $scope 对象中定义了一个属性 message，并将其设置为字符串 "Hello World!"。这个属性可以在 HTML 视图中使用。

$rootScope

$rootScope 是所有 $scope 对象的父级。它是全局作用域，可以在整个应用程序中共享数据和函数。与 $scope 不同，$rootScope 只有一个实例，并且不会在控制器之间继承。

示例代码

var app = angular.module('myApp', []);
app.run(function($rootScope) {
  $rootScope.message = "Hello World!";
});
app.controller('MyController', function($scope, $rootScope) {
  $scope.message = $rootScope.message;
});

在上面的示例中，我们通过调用 run 函数来注入 $rootScope。然后，我们在 $rootScope 对象中定义了一个属性 message，并将其设置为字符串 "Hello World!"。接下来，我们定义了一个名为 MyController 的控制器，并注入了 $rootScope 依赖项。在控制器中，我们将 $rootScope.message 分配给 $scope.message，以便在视图中使用。

$emit 和 $broadcast

$emit 和 $broadcast 是 AngularJS 中用于事件通信的两种方法。它们可以让模型之间相互通信而不需要显式绑定。$emit 方法向上传递事件，$broadcast 方法向下传递事件。

示例代码

-- -------------------- ---- -------
--- --- - ----------------------- ----
---------------------------------- ---------------- ----------- -
  ------------------ - ---------- -
    -------------------------------------------
  --
---
--------------------------------- ---------------- ----------- -
  ------------------------------- ---------- -
    -- ------ -----
  ---
---

在上面的示例中，我们定义了两个控制器 ParentController 和 ChildController，并注入了 $rootScope 依赖项。当 ParentController 中的 handleClick 函数被调用时，它会从 $rootScope 下发出一个名为 'event:handleClick' 的事件。ChildController 中的 $scope.$on 函数捕获该事件，并执行相应的逻辑。

$watch

$watch 方法是 AngularJS 中用于监视模型属性变化的方法。它可以在模型属性变化时调用回调函数，并执行相应的逻辑。

示例代码

var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
  $scope.$watch('message', function(newValue, oldValue) {
    console.log(newValue, oldValue);
  });
});

在上面的示例中，我们定义了一个名为 MyController 的控制器，并注入了 $scope 依赖项。然后，我们使用 $scope.$watch 方法来监视 $scope 对象中名为 message 的属性。当该属性变化时，回调函数就会被调用，并打印出新值和旧值。

结论

在本文中，我们深入

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29740