AngularJS - Области

: AngularJS; 30 июля 2018; 11 апреля 2026; Просмотров: 2421

AngularJS - Области

Область применения - специальный объект javascript, который играет роль соединения контроллера с представлениями. Область содержит данные модели. В контроллерах доступ к данным модели осуществляется через объект $scope.


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

Ниже приведены важные моменты, которые следует учитывать в приведенном выше примере.

$Scope передается как первый аргумент контроллеру во время определения его конструктора.
$Scope.message и $ scope.type - это модели, которые должны использоваться на странице HTML.
Мы установили значения для моделей, которые будут отображаться в прикладном модуле, контроллер которого является shapeController.
Мы также можем определять функции в $scope.

Внимание!!!

Если примеры не отображаются на странице или искажены, проверьте не блокирует ли их браузер!

Opera

Google Chrome

Mozilla Firefox

Yandex

Наследование

Область применения - это специальные контроллеры. Если мы определяем вложенные контроллеры, то дочерний контроллер будет наследовать область его родительского контроллера.


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

Ниже приведены важные моменты, которые следует учитывать в приведенном выше примере.

Мы установили значения для моделей в shapeController.
Мы переопределили сообщение в контроллере circleController. Когда «сообщение» используется в модуле контроллера circleController, будет использоваться переопределенное сообщение.

Пример

В следующем примере будут показаны все вышеупомянутые директивы.


<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.3.14/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>

Результат

Откройте textAngularJS.htm в веб-браузере.

Tags: AngularJS, web

Компьютерапия