Penjelasan terperinci tentang skop dalam AngularJS

Penjelasan terperinci tentang skop dalam AngularJS_AngularJS

WBOY

Lepaskan： 2016-05-16 15:54:32

asal

1230 orang telah melayarinya

Skop ialah objek JavaScript khas yang memainkan peranan pengawal yang paparannya disambungkan. Skop mengandungi data model. Dalam pengawal, data model diakses melalui objek $scope.

<script>
   var mainApp = angular.module("mainApp", []);

   mainApp.controller("shapeController", function($scope) {
     $scope.message = "In shape controller";
     $scope.type = "Shape";
   });
</script>

Salin selepas log masuk

Berikut ialah isu penting untuk dipertimbangkan dalam contoh di atas.

$scope diambil sebagai parameter pertama dalam pembinanya untuk menentukan penunjuk kepada pengawal.
$scope.message dan $scope.type ialah model yang mereka gunakan dalam halaman HTML.
Nilai model yang telah kami tetapkan akan dicerminkan dalam controller shapeController modul aplikasi.
Kita boleh mentakrifkan fungsi fungsi dalam $scope.

Skop warisan

Skop adalah khusus kepada pengawal. Jika kita mentakrifkan pengawal bersarang maka pengawal anak akan mewarisi skop kawalan induknya.

<script>
   var mainApp = angular.module("mainApp", []);

   mainApp.controller("shapeController", function($scope) {
     $scope.message = "In shape controller";
     $scope.type = "Shape";
   });
  
   mainApp.controller("circleController", function($scope) {
     $scope.message = "In circle controller";  
   });
</script>

Salin selepas log masuk

Berikut ialah isu penting untuk dipertimbangkan dalam contoh di atas.

Kami menetapkan nilai model dalam shapeController.
Kalangan pengawal kanak-kanak Mesej pengawal yang kami ganti. Mesej yang ditindih akan digunakan apabila modul "mesej" bagi circle controllerController digunakan.

Contoh

Contoh berikut akan menunjukkan semua arahan di atas.
testAngularJS.html

<html>
<head>
  <title>Angular JS Forms</title>
</head>
<body>
  <h2>AngularJS Sample Application</h2>
  <div ng-app="mainApp" ng-controller="shapeController">
   <p>{{message}} <br/> {{type}} </p>
   <div ng-controller="circleController">
     <p>{{message}} <br/> {{type}} </p>
   </div>
   <div ng-controller="squareController">
     <p>{{message}} <br/> {{type}} </p>
   </div>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
  <script>
   var mainApp = angular.module("mainApp", []);

   mainApp.controller("shapeController", function($scope) {
     $scope.message = "In shape controller";
     $scope.type = "Shape";
   });

   mainApp.controller("circleController", function($scope) {
     $scope.message = "In circle controller";  
   });

   mainApp.controller("squareController", function($scope) {
     $scope.message = "In square controller";
     $scope.type = "Square";
   });

  </script>
</body>
</html>

Salin selepas log masuk

Keputusan

Buka textAngularJS.html dalam penyemak imbas web anda. Lihat hasilnya di bawah.

2015617110218233.jpg (560×429)