Parsing AngularJS scope and using sample code-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Parsing AngularJS scope and using sample code

怪我咯

Mar 30, 2017 am 09:30 AM

Scope plays its View ConnectionController The role of a special JavaScript object. The scope contains the model data. In the controller, the model data is passed through $scope. Object access.

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

$scope is used as the first parameter in its constructor to determine the pointer. Controller.

$scope.message and $scope.type are the models they are used in the HTML page.

The values of the model we have set will be reflected in the application module's controller shapeController. .

We can define functions in $scope

##Inherit scope##The scope is. Specific controller. If we define nested controllers, then the controller child will inherit the scope of its parent control.

<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 to consider in the above example. Question.

We set the value of the model in shapeController.

The sub-controller circleController message we override will be used when the module of the controller circleController is used. Message written.

Example

The following example will demonstrate all the above directives.

<html>
<head>
  <title>Angular JS Forms</title>
</head>
<body>
  <h2 id="AngularJS-nbsp-Sample-nbsp-Application">AngularJS Sample Application</h2>
  <p ng-app="mainApp" ng-controller="shapeController">
   <p>{{message}} <br/> {{type}} </p>
   <p ng-controller="circleController">
     <p>{{message}} <br/> {{type}} </p>
   </p>
   <p ng-controller="squareController">
     <p>{{message}} <br/> {{type}} </p>
   </p>
  </p>
  <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>

Result

Open textAngularJS.html in the web browser. See the following result.

Parsing AngularJS scope and using sample code

The above is the detailed content of Parsing AngularJS scope and using sample code. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

switch case 内变量的范围Feb 09, 2024 am 09:00 AM

packagemainimport"fmt"funcmain(){x:=10switchx{case0:y:='a'fmt.Printf("%c\n",y)case1://y='b'//thiscan'tcompile,y:='b'fmt.Printf("%c\n",y)default:y:=

Linux多线程编程锁详解：如何避免竞争和死锁Feb 11, 2024 pm 04:30 PM

在Linux多线程编程中，锁是一种非常重要的机制，可以避免线程间的竞争和死锁。然而，如果不正确使用锁，可能会导致性能下降和不稳定的行为。本文将介绍Linux中的常见锁类型，如何正确使用它们，以及如何避免竞争和死锁等问题。在编程中，引入了对象互斥锁的概念，来保证共享数据操作的完整性。每个对象都对应于一个可称为”互斥锁”的标记，这个标记用来保证在任一时刻，只能有一个线程访问该对象。Linux实现的互斥锁机制包括POSIX互斥锁和内核互斥锁，本文主要讲POSIX互斥锁，即线程间互斥锁。信号量用在多线程

2022年最新5款的angularjs教程从入门到精通Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

详解Golang函数中的变量作用域Jan 18, 2024 am 08:51 AM

Golang函数中的变量作用域详解在Golang中，变量的作用域指的是变量的可访问范围。了解变量的作用域对于代码的可读性和维护性非常重要。在本文中，我们将深入探讨Golang函数中的变量作用域，并提供具体的代码示例。在Golang中，变量的作用域可以分为全局作用域和局部作用域。全局作用域指的是在所有函数外部声明的变量，即在函数之外定义的变量。这些变量可以在整

掌握JavaScript函数的嵌套和作用域Nov 03, 2023 pm 07:55 PM

掌握JavaScript函数的嵌套和作用域，需要具体代码示例在JavaScript编程中，函数是非常重要的概念。函数的嵌套和作用域能够极大地提高代码的可读性和灵活性。本文将介绍如何正确地使用嵌套函数和作用域，并提供具体的代码示例。函数的嵌套可以理解为在一个函数中定义了另一个函数。这种嵌套的方式能够将代码分成多个小块，使得程序的逻辑更加清晰。同时，嵌套函数还可

使用PHP和AngularJS搭建一个响应式网站，提供优质的用户体验Jun 27, 2023 pm 07:37 PM

在如今信息时代，网站已经成为人们获取信息和交流的重要工具。一个响应式的网站能够适应各种设备，为用户提供优质的体验，成为了现代网站开发的热点。本篇文章将介绍如何使用PHP和AngularJS搭建一个响应式网站，从而提供优质的用户体验。PHP介绍PHP是一种开源的服务器端编程语言，非常适用于Web开发。PHP具有很多优点，如易于学习、跨平台、丰富的工具库、开发效

使用PHP和AngularJS构建Web应用May 27, 2023 pm 08:10 PM

随着互联网的不断发展，Web应用已成为企业信息化建设的重要组成部分，也是现代化工作的必要手段。为了使Web应用能够便于开发、维护和扩展，开发人员需要选择适合自己开发需求的技术框架和编程语言。PHP和AngularJS是两种非常流行的Web开发技术，它们分别是服务器端和客户端的解决方案，通过结合使用可以大大提高Web应用的开发效率和使用体验。PHP的优势PHP

c语言static的作用和用法是什么Jan 31, 2024 pm 01:59 PM

c语言static的作用和用法：1、变量作用域；2、生命周期；3、函数内部；4、修饰全局变量；5、修饰函数；6、其他用途；详细介绍：1、变量作用域，当一个变量前有static关键字，那么这个变量的作用域被限制在声明它的文件内，也就是说，这个变量是“文件级作用域”，这对于防止变量的“重复定义”问题很有用；2、生命周期，静态变量在程序开始执行时初始化一次，并在程序结束时销毁等等。

See all articles