Angular 常見內建指令

2021-07-31 05:43:47 字數 1048 閱讀 8102

指令:就是擴充套件了html的基本功能,通過額外的標籤、屬性來增強html功能

angular的指令在頁面中體現出來就是乙個標籤\屬性\class名稱\注釋等等

常見指令,按照指令的功能,劃分為五大類

1.控制指令,用於angular應用程式載入流程控制

2.渲染指令,用於angular將資料在網頁中進行展示/隱藏處理

3.節點指令,用於angular對標籤、屬性、樣式、內容進行處理的指令、

4.事件指令,用於處理常規事件操作的指令

5.其他指令....

ng-controller

模組中,可以給模組掛載乙個或者多個控制器

掛載好的控制器在當前模組範圍內,可以通過ng-controller指令來指定控制器的作用範圍

目前常規控制器的做法:

先宣告模組

模組下掛載控制器》 控制器的作用範圍僅限於當前模組!>>>區域性控制器

渲染指令:

指令的作用就是將資料,渲染展示到頁面上【底層是封裝了dom操作】

* ng-repeat 迴圈渲染指令

* ng-bind 變數渲染指令,mustache語法的替**法

ng-repeat迴圈渲染指令

屬性直接寫在要迴圈的標籤上!

u in users u和users就會被angular解釋成變數,獲取變數中的值進行處理

節點指令:主要用於標籤、樣式、屬性、內容的操作

ng-show

ng-hide 

ng-class

ng-show和ng-hide根據所給表示式的值來顯示或隱藏html元素。當賦值給ng-show指令的值為false時元素會被隱藏,值為true時元素會顯示。ng-hide功能類似,使用方式相反。

ng-style樣式,主要用於自定義指令的時候進行樣式的處理

常規使用方式和行內樣式沒有什麼大區別

事件指令:angular封裝的用於操作事件的指令

通常是ng-[event]來命名指令,如ng-click表示單擊事件

angular中的事件處理,需要將處理函式掛載到對應控制器的$scope上

angular常用內建指令

指令名稱 描述用來定義模組的作用範圍 ng controller 用來定義控制器的作用範圍 ng repeat 迴圈遍歷陣列 ng bind 繫結資料 同 ng show 用來顯示或隱藏元素 值為true false 原理是設定元素的display ng hide 用來顯示或隱藏元素 值為true ...

Angular 4 0 內建指令

原文出處 在這篇文章中,我們將分別列舉每乙個內建指令的用法,並提供乙個例子作為演示。盡量用最少最簡單的描述,讓你在更快更準確地學會每一種內建指令的基本用法。作用 像 for 迴圈一樣,可以重複的從陣列中取值並顯示出來。例子 ts this.userinfo 張三 李四 王五 html 講解 他的語法...

Angular中的內建指令和自定義指令

內建指令 標記的範圍盡可能小,效能,區域範圍越小,效能會更好。ngbind指令 將作用域 scope 中的值繫結到元素的 innerhtml 上,其效果會比通過表示式繫結的方式更友好 用於改進表示式 所帶來的載入時表示式符號暫時性展現的問題。ngrepeat 指令 ng repeat 指令用來遍歷乙...