AngularJS 范围
范围是 HTML（视图）和 JavaScript（控制器）之间的绑定部分。
范围是一个包含可用属性和方法的对象。
视图和控制器都可以访问范围。
如何使用范围？
在 AngularJS 中创建控制器时，将 $scope 对象作为参数传递
示例
在控制器中创建的属性可以在视图中引用
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
亲自试一试 »
在控制器中向 $scope 对象添加属性时，视图（HTML）可以访问这些属性。
在视图中，您不需要使用前缀 $scope，只需引用属性名称，例如 {{carname}}。
理解范围
如果我们认为一个 AngularJS 应用由以下部分组成：
- 视图，即 HTML。
- 模型，即当前视图可用的数据。
- 控制器，即创建/更改/删除/控制数据的 JavaScript 函数。
那么范围就是模型。
范围是一个包含属性和方法的 JavaScript 对象，视图和控制器都可以访问这些属性和方法。
示例
如果在视图中进行更改，则模型和控制器将更新
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>我的名字是 {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
亲自试一试 »
了解您的范围
重要的是要知道在任何时候您正在处理哪个范围。
在上面两个示例中，只有一个范围，因此了解您的范围不是问题，但是对于较大的应用程序，HTML DOM 中的某些部分可能只能访问某些范围。
示例
在处理 ng-repeat 指令时，每次重复都可以访问当前重复对象
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
</script>
亲自试一试 »
每个 <li> 元素都可以访问当前重复对象，在本例中为字符串，通过使用 x 引用。
根范围
所有应用程序都具有一个 $rootScope，它是包含 ng-app 指令的 HTML 元素上创建的范围。
根范围在整个应用程序中可用。
如果一个变量在当前范围和根范围内具有相同的名称，则应用程序使用当前范围中的变量。
示例
变量“color”存在于控制器的范围和根范围内
<body ng-app="myApp">
<p>根范围的最喜欢的颜色：</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>控制器的范围的最喜欢的颜色：</p>
<h1>{{color}}</h1>
</div>
<p>根范围的最喜欢的颜色仍然是：</p>
<h1>{{color}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'blue';
});
app.controller('myCtrl', function($scope) {
$scope.color = "red";
});
</script>
</body>
亲自试一试 »
