Angular.js之作用域(scope) '@', '=', '&' 实例详解

Angular.js是一个流行的JavaScript框架，它使用了一种称为作用域(scope)的概念来管理数据和事件。作用域(scope)是一个对象，它将控制器(controller)和视图(view)连接起来，使它们能够相互通信。

在Angular.js中，作用域(scope)可以通过三种方式与控制器(controller)进行绑定：'@'、'='和'&'。下面将详细讲解这三种方式，并提供示例说明。

@ - 单向绑定

使用'@'符号可以在控制器(controller)和视图(view)之间进行单向绑定。这意味着控制器中的值会传递给视图，但视图中的变化不会反映到控制器中。

示例：

<!-- 在视图中 -->
<div ng-controller=\"MyController\">
  <h1>{{ title }}</h1>
</div>

// 在控制器中
app.controller('MyController', function($scope) {
  $scope.title = \"Hello, World!\";
});

在上面的示例中，控制器中的title变量通过$scope对象传递给视图，视图中的{{ title }}表达式会显示\"Hello, World!\"。

= - 双向绑定

使用'='符号可以在控制器(controller)和视图(view)之间进行双向绑定。这意味着控制器和视图中的值会相互影响，任何一方的变化都会反映到另一方。

示例：

<!-- 在视图中 -->
<div ng-controller=\"MyController\">
  <input ng-model=\"name\" type=\"text\">
  <h1>Hello, {{ name }}!</h1>
</div>

// 在控制器中
app.controller('MyController', function($scope) {
  $scope.name = \"John Doe\";
});

在上面的示例中，控制器中的name变量通过$scope对象传递给视图，并且通过ng-model指令实现了双向绑定。当用户在输入框中输入内容时，视图中的{{ name }}表达式会实时更新。

& - 函数绑定

使用'&'符号可以在控制器(controller)和视图(view)之间进行函数绑定。这意味着可以将控制器中的函数传递给视图，并在视图中调用该函数。

示例：

<!-- 在视图中 -->
<div ng-controller=\"MyController\">
  <button ng-click=\"sayHello()\">Say Hello</button>
</div>

// 在控制器中
app.controller('MyController', function($scope) {
  $scope.sayHello = function() {
    alert(\"Hello, World!\");
  };
});

在上面的示例中，控制器中的sayHello函数通过$scope对象传递给视图，并通过ng-click指令绑定到按钮上。当用户点击按钮时，控制器中的函数会被调用，弹出一个提示框显示\"Hello, World!\"。

以上就是关于Angular.js作用域(scope) '@', '=', '&'的详细讲解和示例说明。希望对你有所帮助！