AngularJS(三) 指令實戰及自定義指令

2021-07-23 16:48:55 字數 840 閱讀 1259

上篇介紹了一些指令的應用,本篇介紹一些常用的用法格式。

下面通過輸入乙個名字實現實時更新文字內容。

需要的指令有: 、

ng-model

、ng-bind

、n-init

demo

要引用的檔案(這裡第一次出現以後,後面引用的都是這個檔案,以後不再重複)

body部分

姓名:

你輸入的為: }

實現的效果:

該例子解析:

該指令告訴

angularjs

,元素是

angularjs

應用程式的所有者,在網頁載入完畢時會自動引導(自動初始化)應用程式);

ng-model:

該指令繫結

html

元素到應用程式資料;

ng-bind:

繫結要運算的要顯示的內容資料,用於顯示通過繫結

html

元素到應用程式的資料;

ng-init

:該指令為

angularjs

應用程式的定義了初始值;

使用.directive

函式來新增自定義的指令,使用駝峰法來命名乙個指令,

runoobdirective

,但在使用它的時候需要以「

-」分割,

runoob-directive

;舉例說明:

本篇大概說了指令的應用格式以及怎麼建立自定義指令。

AngularJS快速入門指南04 指令

angularjs通過指令將html屬性進行了擴充套件。angularjs指令是帶有ng 字首的擴充套件html屬性。div ng init firstname john p name input type text ng model firstname p p you wrote p div 執行...

AngularJS快速入門指南04 指令

angularjs通過指令將html屬性進行了擴充套件。angularjs指令是帶有ng 字首的擴充套件html屬性。div ng init firstname john p name input type text ng model firstname p p you wrote p div 執行...

AngularJS快速入門指南04 指令

angularjs通過指令將html屬性進行了擴充套件。angularjs指令是帶有ng 字首的擴充套件html屬性。div ng init firstname john p name input type text ng model firstname p p you wrote p div 執行...