AngularJS 的自定義指令

2021-09-23 15:00:37 字數 1511 閱讀 2383

因此,angularjs的自定義指令,就是你自己的指令,加上編譯器編譯dom時執行的原生核心函式。這可能很難理解。現在,假設我們想在應用中不同頁面復用一些特定的**,而又不複製**。那麼,我們就可以簡單地把這段**放到單獨的檔案,並呼叫使用自定義指令的**,而不是一遍又一遍地敲下來。這樣的**更容易理解。angularjs中有四種型別的自定義指令:

元素指令

在html中寫下如下的標籤,它用來放置**片段。當我們想使用特定的**,我們就用上述標籤來包含該**。

...
在js檔案中,用以下幾行**來使上述angularjs自定義指令生效。

return ;

});

**解釋:

屬性指令

在html檔案的html標籤中敲入如下屬性,這個標籤用來盛放**片段。當我們想使用特定**片段,我們只要敲下這樣的標籤來包含該**。

... 

在js檔案中,用以下**來使上述angularjs自定義指令生效。

return ;

});

注意: angularjs 推薦你用簡單的 css 和普通的注釋代替自定義指令中的css和注釋.

第一步在指定的資料夾下新建乙個資料夾命名為cdirectives,用來存放自定義的指令。然後,在該資料夾下建立乙個reviews.html檔案,用於持有使用者的reviews。此時,你的資料夾層次結構如下:

第二步在details.html中剪下review部分,並新增標籤如下所示:

第三步將你在details.html頁面中剪下的**拷貝至reviews.html如下所示:

} ~} on } 

} ~ }

add review

第四步

現在可以在user-reviews標籤中新增行為了。讓我們開啟controller.js,新增如下**:

guitarcontrollers.directive('userreviews', function() ;

});

**解釋:

我們的指令在這裡變成了userreviews(以camel形式表示)並且連字元不見了。下面我們可以說,當它被呼叫時載入templateurl中的檔案並且對元素e限制該指令。

我們剛剛自定義了乙個指令。儘管看起來我們的應用中沒有變化,但是現在我們的**較之前已經進行了很好的規劃。你能為描述和規格自定義指令嗎?自己嘗試一下吧。

有趣的部分:

你可以通過css為你的user-reviews新增樣式,就像你對於div層的處理一樣。

希望你喜歡,並分享我的工作~

angularJs自定義指令

e 元素 a 屬性,預設值 c 類名 m 注釋 directive my directive expression priority 優先順序 用來表示指令使用的優先順序 如果乙個元素上具有兩個優先順序相同的指令,宣告在前面的那個會被優先呼叫。如果其中一 個的優先順序更高,則不管宣告的順序如何都會被...

AngularJS自定義指令

自定義的指令定義 1.directive 方法可以接受兩個引數,第乙個引數是指令的名字,第二個引數是函式,第二個引數用來返回指令的具體內容。2.指令的引數包括 restrict eacm 分別對應元素 屬性 類名 注釋 主要體現在呼叫指令時的不一樣 優先順序 ngrepeat,來定該自定義標籤的優先...

Angularjs 自定義指令

指令的作用可以簡單的描述為實現語義化的標籤,比如你在移動端h5應用中,有個經常用的功能,比如通訊錄的功能,不同的頁面都要用到,這時你可以將其封裝為指令,在使用的時候可以通過這樣的語義化的標籤直接在頁面中使用即可。首先實現乙個helloworld的例子,讓我們先上手自定義指令,先體會下指令的妙處。定義...