AngularJS的常見指令

2021-07-31 06:55:02 字數 1500 閱讀 6770

angularjs的指令

指示,命令:指揮示意要做一件事情!

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

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

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

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

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

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

5.其他指令....

(1)控制指令:

>  ng-controller

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

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

目前常規控制器的做法:

先宣告模組

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

angular1.2版本以前

控制器的定義,是直接通過全域性函式來實現的

//控制器:全域性控制器

function ctrl($scope)
全域性控制器的意思,是可以在網頁中任意地方通過ng-controller進行註冊

全域性控制器造成了全域性資料汙染~!所以angular在1.2版本以後進行了徹底修改

廢棄了全域性控制器~ 而是提倡使用掛載在模組下的區域性控制器!來更好的控制資料!

(2)渲染指令:

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

* ng-repeat 迴圈渲染指令

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

*ng-bind-html這個指令,類似於原生js的innerhtml

,但是使用的時候一定要慎重

,對於它修飾的內容

,必須確保安全性

,如果內容的**不確定,

不要使用編譯html標籤的屬性或者函式》

>>xss攻擊

ng-include 包含頁面指令

類似於jquery 中的load()函式

,用於載入其他頁面

angular應用

~對於屬性值,

會被解析成變數

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

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

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

ng-href:用於在angular應用中替代a標籤的href屬性

ng-src:用於在angular應用中替代img標籤的src屬性

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

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

:實際專案開發中,對於使用者編號、商品編號等等各種編號,通常使用字串來進行編號所以使用字串來

表示各種編號,並且編號能在程式中保證編號的唯一性。

AngularJS內建指令

這篇日誌簡單記錄了一些內建指令,先使用起來,再談一些有趣的東西。內建指令 所有的內建指令的字首都為ng,不建議自定義指令使用該字首,以免衝突。首先從一些常見的內建指令開始。先列出一些關鍵的內建指令,順便簡單說說作用域的問題。ng model 將表單控制項和當前作用域的屬性進行繫結,這麼解釋似乎也不太...

angularJS常見的報錯

error ng areq 找不到對應的ctrl error injector unpr 模組未能正確注入 error ngmodel nonassign 不是正確的ng model表示式 error rootscope inprog 這個報錯的概念還沒弄清楚,貌似是因為兩個事件同時執行造成的錯誤 ...

Angular JS 中 指令詳解

angular js的強大功能就在於其可以自定義很多指令,現在就指令做一下詳細的剖析。乙個angular js 指令 directive 需要指定乙個唯一的名字 mydirective 和乙個函式,其中返回乙個物件,該物件包含該指令應有的一些行為,具體參見如下所有的屬性。directive mydi...