AngularJS scope
- Forrige side AngularJS kontroller
- Næste side AngularJS filter
Scope (scope) er den del, der binder HTML (visning) og JavaScript (controller).
Scope er et objekt med tilgængelige egenskaber og metoder.
Scope er tilgængelig for både visning og controller.
Hvordan bruger man scope?
Når du opretter en controller i AngularJS, vil du $scope Objekter som parameter overføres:
实例
I en controller oprettede egenskaber kan bruges i en visning:
<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>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Bill Gates";
});
</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 元素上创建的作用域。
rootScope 在整个应用程序中可用。
如果某个变量在当前作用域和根作用域（rootScope）中具有相同的名称，则应用程序将使用当前作用域中的变量。
实例
控制器的作用域和 rootScope 中都存在一个名为 "color" 的变量：
<body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is still:</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>
- Forrige side AngularJS kontroller
- Næste side AngularJS filter
