Χώρος Εργασίας AngularJS

Scope (scope) is the binding part between HTML (view) and JavaScript (controller).

The scope is an object that has available properties and methods.

The scope is available to both the view and the controller.

How to use the scope?

When you create a controller in AngularJS, you will $scope Object is passed as a parameter:

Παράδειγμα

Properties created in the controller can be referenced in the view:

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  The variable 'carname' is set to '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 = "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 περιέχουν μια μεταβλητή με το όνομα "χρώμα":

<body ng-app="myApp">
Η αγαπημένη χρώμα του rootScope:
<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>

Δοκιμάστε το προσωπικά