angular中transclude的理解

2021-10-08 09:25:18 字數 1062 閱讀 9196

今天被這個transclude搞糊塗了,弄了半天,才知道原來使用起來很簡單。很煩惱為社麼書中的對於這個的介紹這麼晦澀難懂。直到看到了這篇文章,才讓我弄清楚了。

一、transclude介紹

transclude是angular中自定義指令中的乙個引數。中文就是嵌入的意思。也就是說通過這個引數設定,可以將指令內容嵌入到自定義指令中的模版中。其值預設是false,當為true時,會起到嵌入的作用。

二、使用

首先我們先看一下不使用tranclude的情況:

js:

return

});html:

這是一段最簡單的自定義指令**,不用解釋,都能懂。

在這個基礎上,我腦洞一下,我在html的自定義指令標籤中隨意新增點什麼東西會怎樣呢?

js:

return

});html:

這是指令中的內容

結果也很容易知道。最後html中的**是:

這是指令模版中的內容

也就是說最後執行的結果是指令模版中的內容將指令中的**進行了覆蓋。

那麼問題來了,如果我想把指令中的內容嵌入到指令模版中,怎麼辦?這個時候就需要用到transclude了。實現的方法如下:

return

});

其中橙色的地方是需要增加的,在模版中,ng-transclude的作用就是告訴angular嵌入的位置。結果就是:

這是指令中的內容

span標籤是系統自動生成的,具體作用還未了解,但是這不妨礙對transclude的**。

進一步,如果我們想把指令模版中的內容和指令中的內容都顯示出來,可以這麼做:

return

});

結果就是

指令模版中的內容

span這是指令中的內容

angular中的服務

angular中的服務 angular中的服務相當於乙個狀態管理,可以將資料放在服務裡面進行獲取以及編輯。服務的安裝命令 ng g service count安裝好後,會在服務的ts檔案中引入乙個injectable模組,這是乙個服務裝飾器,可以通過 injectable 將乙個類裝飾成乙個服務。i...

angular 中的 DOM 操作

在angular中使用第三方外掛程式時最好都封裝到指令 directives 中去,dom操作也最好都解構到指令中。避免使用 jquery 來操作 dom,包括增加元素節點,移除元素節點,獲取元素內容,隱藏或顯示元素。你應該使用 directives 來實現這些動作,有必要的話你還要編寫自己的 di...

Angular中 provider依賴注入詳解

provider可以封裝 value factory service constant除外 provider必須有乙個 get方法 使用provider的時候,我們不能單獨的配置,需要在config中來建立provider,在angular中在config中 只能注入提供服務的應用商,但是angua...