Учебники

AngularJS — Области применения

Октябрь 23, 2018

Scope — это специальный объект 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.

$ Scope передается в качестве первого аргумента контроллеру во время определения его конструктора.

$ Scope.message и $ scope.type — это модели, которые используются на странице HTML.

Мы присваиваем значения моделям, которые отражаются в модуле приложения, контроллером которого является shapeController.

Мы можем определить функции в $ scope.

Область Наследования

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

<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 , используется переопределенное сообщение.

Мы присваиваем значения моделям в shapeController.

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

пример

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

testAngularJS.htm

Live Demo 

<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 = "https://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>

Выход

Откройте файл testAngularJS.htm в веб-браузере и посмотрите результат.

48
Share: