cari

Rumah >hujung hadapan web >tutorial js >Penjelasan terperinci tentang skop dalam AngularJS_AngularJS

Penjelasan terperinci tentang skop dalam AngularJS_AngularJS

WBOY
WBOYasal
2016-05-16 15:54:321232semak imbas

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>

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>

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>

Keputusan

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

2015617110218233.jpg (560×429)

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penjelasan terperinci tentang kaedah pengendalian pengecualian dalam pengetahuan JavaScript_BasicArtikel seterusnya：Penjelasan terperinci tentang kaedah pengendalian pengecualian dalam pengetahuan JavaScript_Basic

Artikel berkaitan

Lihat lagi