AngularJS scop

作用域（scope）是 HTML（视图）和 JavaScript（控制器）之间的绑定部分。

作用域是一个具有可用属性和方法的对象。

作用域对视图和控制器都是可用的。

如何使用作用域？

当你在 AngularJS 中创建控制器时，你将 $scope 对象作为参数传递：

Exempel

属性在控制器中创建后，可以在视图中引用：

<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>

Prova själv

När man lägger till i kontrollern} $scope när du lägger till egenskaper till objektet, kan vyn (HTML) komma åt dessa egenskaper.

I vyn, använder du inte $scope Prefix, du behöver endast hänvisa till ett attributnamn, t.ex. {{carname}}.

Förstå domän

Om vi ser AngularJS-applikationen som består av följande delar:

  • Vyn, HTML.
  • Modellen, de data som är tillgängliga för den aktuella vyn.
  • Kontrollern, en JavaScript-funktion, används för att skapa/ändra/ta bort/kontrollera data.

Så är domänen modellen.

En domän är ett JavaScript-objekt med egenskaper och metoder som är tillgängliga för både vy och kontroll.

Exempel

Om du gör ändringar i vyn, uppdateras modellen och kontrollern:

<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>mitt namn är {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Bill Gates";
});
</script>

Prova själv

Förstå din domän

Det är viktigt att förstå vilken domän du arbetar med när som helst.

I de två tidigare exemplen finns det bara en domän, så att förstå din domän är inte ett problem, men för större applikationer kan vissa delar av HTML DOM endast komma åt vissa domäner.

Exempel

När man hanterar ng-repeat-kommandot, kan man komma åt det aktuella upprepade objektet vid varje repetition:

<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>

Prova själv

Varje <li> Element kan komma åt den aktuella upprepade objektet, i detta fall en sträng, genom att använda x för att hänvisa till.

rootdomän

Alla applikationer har en $rootScopedet är det som innehåller ng-app Skapar en domän på HTML-elementet för kommandon.

rootScope är tillgängligt i hela applikationen.

Om en variabel har samma namn i den aktuella domänen och rootScope, använder applikationen variabeln i den aktuella domänen.

Exempel

Kontrollernas domän och rootScope innehåller en variabel med namnet "color":

<body ng-app="myApp">
<p>Favoritfärgen för rootScope:</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>

Prova själv