AngularJS Scope

Ang scope (scope) ay ang nakatali na bahagi sa pagkakasundo ng HTML (view) at JavaScript (controller).

Ang scope ay isang object na may magagamit na attribute at method.

Ang scope ay magagamit sa parehong view at controller.

Paano gamitin ang scope?

Kapag nilikha mo ang controller sa AngularJS, ikaw ay $scope Ang object bilang argumento sa pagpapakita:

Mga halimbawa

Sa paglilikha ng property sa controller, maaaring itukoy ito sa view:

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

Try It Yourself

Kapag inilalagay sa controller, $scope Kapag pinapagdagdag ng mga katangian sa object, ang view (HTML) ay puwedeng ma-access ang mga katangian.

Sa view, hindi mo gumagamit ng $scope Ang prefix, kailangan mong tanggapin lamang ang pangalan ng isang katangian, tulad ng {{carname}}。

Unawain ang scope

Kung inaasahan natin ang AngularJS application bilang binubuo ng sumusunod na mga bahagi:

  • Ang view, ang HTML.
  • Ang model, ang data na magagamit ng kasalukuyang view.
  • Ang controller, ang JavaScript function na ginagamit para sa paglikha/gamit/gamitang bawas at kontrol ng data.

Kaya ang scope ay ang model.

Ang scope ay isang JavaScript object na may mga katangian at mga paraan, na ang mga katangian at mga paraan ay puwedeng ma-access ng view at controller.

Mga halimbawa

Kung nagawa mo ng pagbabago sa view, ang model at ang controller ay magiging update:

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

Try It Yourself

Unawain ang iyong scope

Ang pagkaunawa sa scope na kasalukuyang pinag-aaral ay napakahalaga sa anumang panahon.

Sa pinagmulang mga halimbawa, may isang lamang scope, kaya hindi ito problema, ngunit para sa mas malaking application, ang ilang bahagi ng HTML DOM ay puwedeng makapasok lamang sa ilang mga scope.

Mga halimbawa

Kapag pinag-aaral ang direktiba ng ng-repeat, bawat pag-uulit ay puwedeng ma-access ang kasalukuyang pinagmulang object:

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

Try It Yourself

Bawat <li> Ang lahat ng element ay puwedeng ma-access ang kasalukuyang pinagmulang object, sa kasong ito isang string, sa pamamagitan ng x para sa paggamit ng pagtutukoy.

root scope

Ang lahat ng mga application ay may isang $rootScope，na ito ay nasa loob ng ng-app Ang larawan ng scope na nilikha sa HTML element ng direktiba.

Ang rootScope ay magagamit sa buong application.

Kung ang isang variable ay may magkaparehong pangalan sa kasalukuyang larawan at ang rootScope (rootScope), ang application ay gagamitin ang variable sa kasalukuyang larawan.

Mga halimbawa

Ang larawan ng controller at ang rootScope ay may isang variable na may pangalan na "color":

<body ng-app="myApp">
<p>Ang pinakamagandang kulay ng 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>

Try It Yourself