angular入門學習之四

阿新 • • 發佈：2019-01-21

最近公司有個專案需要寫，所以blog更新就停了一段時間，沒關係，我會持續更新的。雖然沒什麼人看，但是我知道其實寫部落格不僅僅是給別人看，也是對自己理解的一個梳理。

廢話不多說，入門四寫什麼呢，即scope的層次結構。

Scope在一個層次結構組織中，改層次結構使scope有良好的組織結構，並且與他們所代表的檢視上下文相關聯。在AngularJS模組級別中有一個根scope，接下來是其他子scope的實現，並且子scope可以互相巢狀，從而使程式碼有層次結構。

先看程式碼

<!doctype html>
<html ng-app="myApp">
	<head>
		<title>Angular</title>
	</head>
	<body>
		<div ng-controller="LevelA"><!--根Scope-->
			<h3>{{title}}</h3>
			ValueA = {{valueA}} <input type="button" ng-click="inc()" value="+"/>
			<h3>sum: {{valueA}}</h3>
			<div ng-controller="LevelB"><!--二級Scope-->
				<h3>{{title}}</h3>
				ValueA = {{valueA}}<br>
				ValueB = {{valueB}}<!--獲取上級變數-->
				<input type="button" ng-click="inc()" value="+"/>
				<h3>sum:{{valueA+valueB}}</h3>
				<div ng-controller="LevelC"><!--三級Scope-->
					<h3>{{title}}</h3>
					ValueA = {{valueA}}<br>
					ValueB = {{valueB}}<br><!--跨級獲取變數-->
					ValueC = {{valueC}}
					<input type="button" ng-click="inc()" value="+"/>
					<h3>sum:{{valueA+valueB+valueC}}</h3>
					<div ng-controller="LevelD"><!--四級Scope-->
						<h3>{{title}}</h3>
						ValueA = {{valueA}}<br>
						ValueD = {{valueD}}
						<input type="button" ng-click="inc()" value="+"/>
						<h3>sum:{{valueA+valueD}}</h3>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../angular.js"></script>
		<script type="text/javascript" src="scope_hierarchy.js"></script>
	</body>
</html>

angular.module('myApp',[]).controller('LevelA',function($scope){//不同級別控制器及方法。
	$scope.title = "LevelA";
	$scope.valueA = 1;
	$scope.inc = function(){
		$scope.valueA++;
	};
}).controller("LevelB",function($scope){
	$scope.title="LevelB";
	$scope.valueB=1;
	$scope.inc = function(){
		$scope.valueB++;
	}
}).controller("LevelC",function($scope){
	$scope.title="LevelC";
	$scope.valueC=1;
	$scope.inc = function(){
		$scope.valueC++;
	}
}).controller("LevelD",function($scope){
	$scope.title="LevelD";
	$scope.valueD=1;
	$scope.inc = function(){
		$scope.valueD++;
	}
});

這裡我們定義了4個控制器，並且賦予他們相加的方法。可以看到子作用域可以獲取父級的變數並且進行運算等等。

angular入門學習之四

最近公司有個專案需要寫，所以blog更新就停了一段時間，沒關係，我會持續更新的。雖然沒什麼人看，但是我知道其實寫部落格不僅僅是給別人看，也是對自己理解的一個梳理。廢話不多說，入門四寫什麼呢，即scope的層次結構。 Scope在一個層次結構組織中，改層次結構使scope有

OpenGL入門學習之四——顏色的選擇

OpenGL支援兩種顏色模式：一種是RGBA，一種是顏色索引模式。無論哪種顏色模式，計算機都必須為每一個畫素儲存一些資料。不同的是，RGBA模式中，資料直接就代表了顏色；而顏色索引模式中，資料代表的是一個索引，要得到真正的顏色，還必須去查索引表。 1. RGBA顏色 RGBA模式中，每一個畫素會儲存以下資

angular入門學習之二

本篇示例展示兩個模組之間的依賴注入。每個模組都有自己的控制器和方法。上Demo <!doctype html> <html ng-app="myApp"> <head> <title>Angularjs Dev<

NS2入門學習（四）之Otcl知識點

面向物件的Tcl語言，物件和類的概念同C++類似。 1.類和物件的定義 % Class Animal #定義類名 % Animal animal_1#產生類的物件 animal info class =>Animal

java入門學習之路

java開發之路java是面向對象的編程，個人覺得記憶比較重要。第一階段java基礎部分unix開發環境熟練掌握開發中常用的操作系統linux的安裝及使用：掌握文件系統、網絡、用戶管理方法：能熟練使用vi和vim進行文件編輯；能在unix環境下進行文件查找、權限控制、能熟練配置用戶使用環境及開發生產環境。(1

WorkerMan 入門學習之（三）基礎教程-Timer類的使用

timer類定時基礎教程連接 worker loader 入門入門學習 json 1、ServerTimer.php 代碼： <?php /** * 定時器學習 */ require_once __DIR__ . ‘/Workerman/Autoload

Angular框架學習之---Angualr專案實踐

1.專案目錄如下： node_modules，以及src（有後端基礎的同學可同認定為為後端的src）其中根元件目錄如下： app.modules.ts根元件中注入服務。根元件內容如下： app.compoent 以下這塊兒是路由，

python學習之四(集合的相關操作)

集合：集合是由不同元素組成的，集合裡的元素是無序的，集合中的元素必須是不可變的。集合的簡單定義： s = {1,2,3,4,5,6,6} print(type(s)) print(s) 輸出結果： type表明了這是一個集合型別，輸出元素集合把重複的元素自動去除。另外利用這種

SparkSQL入門案例之四(SparkSQL2.x)

前幾個案例講的都是都是SparkSQL1.x的程式設計，所以這裡就講SparkSQL2.x的程式設計直接上程式碼，這裡的程式碼是在前邊案例的基礎上的： package cn.ysjh0014.SparkSql import org.apache.spark.SparkConf impor

Docker學習之四：使用docker安裝mysql，碰到了一個啟動的坑

Docker學習之四：使用docker安裝mysql，碰到了一個啟動的坑第一步，從docker中拉取MySQL映象 $ sudo docker pull mysql $ sudo docker images 第二步，建立並啟動一個MySQL容器 $ sudo doc

C++11併發學習之四：執行緒同步（續）

有時候，在第一個執行緒完成前，可能需要等待另一個執行緒執行完成。C++標準庫提供了一些工具可用於這種同步操作，形式上表現為條件變數(condition variable)和期望(future)。一.條件變數(condition variable) C++標準庫對條件變數有兩套實現：std::c

USB開裝置開發學習之四：USB傳輸之控制傳輸

原文：https://blog.csdn.net/go_str/article/details/80782229 前言 USB控制傳輸分為以下四種：批量傳輸：批量傳輸一般用於批量的和非實時的資料傳輸，通俗的來說就是用於資料量大但對時間

oracle 18c 18.3 學習之四 create pdb

os: centos 7.4 db: oracle 18c(18.3) 使用 dbca 建庫時建立的是CDB，順帶建立了一個 pdbpeiyb，現在再建立如下幾個pdb。 pdbshenz pdbguangz pdbdongg 使用了幾種方式建立pdb，大同小異。使用

六天搞懂“深度學習”之四：基於神經網路的分類

分類用於確定資料所歸屬的類別，而回歸是根據已知的資料進行推斷或估計某個未知量，比如根據年齡和教育水平進行收入預測分析。分類的典型應用是垃圾郵件過濾和字元識別。雖然神經網路適用於分類和迴歸，但卻很少用於迴歸。這不是因為它的效能不好，而是因為大多數迴歸問題可以用更簡單的模型來解決。（迴歸問

Angular cdk 學習之 Portals

CDK裡面Portals模組的功能就是將動態內容(這個內容可以是Component也可以是一個TemplateRef)呈現到應用程式中。更加直接點的解釋就是把Portal放到指定位置(我們把他叫做插槽PortalOutlet)。Porta

Angular cdk 學習之 Coercion、Keycodes、Platform

cdk(Component Dev Kit)是由material團隊開發與維護的。自定義元件的一些小kit。首先不管是啥技術咱們都的先找到官方文件，所以先給出兩個官方文件連結cdk npm連結 https://www.npmjs

MongoDB最簡單的入門教程之四：使用Spring Boot操作MongoDB

Spring Boot 是一個輕量級框架，可以完成基於 Spring 的應用程式的大部分配置工作。Spring Boot的目的是提供一組工具，以便快速構建容易配置的Spring應用程式,省去大量傳統Spring專案的繁瑣配置。 MongoDB是一個基於分散式檔

【python+opencv入門學習】四、視訊的讀取、顯示、儲存

本篇文章，將學習如何讀取視訊，顯示視訊和儲存視訊。分別學習從相機和視訊檔案中讀取視訊。主要學習類VideoCapture和類VideoWrter的使用。環境：Windows 7（64） python 3.6 opencv 3.4.2 一、視訊的讀取與顯示 1

VVC程式碼 BMS 幀內預測學習之四：xFillReferenceSamples()

xFillReferenceSamples()函式是參考畫素的獲取過程。主要步驟： 1、分析臨近的畫素是否可獲取 2、進行參考樣本的填充：若臨近的畫素全部可獲取，則賦值；全部不可獲取，則賦預設值；若部分可獲取，則對可獲取的賦對應的值，不可獲取的用預設值填充。

python入門學習之Django框架設計思想

談到在web應用領域，除了Python的語法，Django是Python後臺一個最重要的框架，那麼，什麼是軟體框架呢？舉個簡單的例子，對於一個公司來說，公司中有各個職能部門，每個部門各司其職，通過部門之間的配合來完成工作，這些部門就形成了一個公司的組織架構。從某種意義上來說，公司就是一種框架。

angular入門學習之四

相關推薦