Details about the scope of AngularJS

Source: Internet
Author: User
Tags define function
This article mainly introduces the scope in AngularJS, which is the basic knowledge in AngularJS learning. If you need it, you can refer to the scope to play the role of its view connection controller as a special JavaScript Object. The range contains model data. In the controller, model data is accessed through the $ scope object.

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

The following are important issues to consider in the preceding example.

  • $ Scope is used as the first parameter in its constructor to determine the metric to the Controller.
  • $ Scope. message and $ scope. type are the models they use on the HTML page.
  • We have set the model value to reflect the Controller shapeController of the application module.
  • We can define function functions in $ scope.

Inheritance Scope

The range is a specific controller. If we define a nested controller, then the Controller child will inherit the range controlled by its parent.

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

The following are important issues to consider in the preceding example.

  • We set the model value in shapeController.
  • We overwrite the subcontroller circleController message. When the module of the controller circleController in a message is used, messages that are used for rewriting are used.

Example

The following example shows all the preceding commands.
TestAngularJS.html

  Angular JS FormsAngularJS Sample Application

{Message }}
{Type }}

{Message }}
{Type }}

{Message }}
{Type }}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.