ionic 自定義指令標誌紅點

2021-07-23 04:24:10 字數 776 閱讀 1944

如果生活欺騙了你,請不要灰心,因為下一秒不知道會發生什麼事,也許是好的,也許是讓你更灰心的,然而對於你,你依然要生活,吃飯,談笑風聲。

可以看到,直接賦值badge=12,選擇樣式badge-style="badge-assertive"(也就是紅點),那麼在載入的時候就會顯示成如下這個樣子:

其實我們可以把badge=12替換成乙個變數,這個變數我們就可以在controller來執行與服務端的通訊獲取值,然後再賦值顯示出來,這樣子就可以與邏輯業務整合起來,動態顯示,比如badge="num",變數'num'就可以在controller中通過$scope.num = 12 賦值。同時需要注意,badge的值大於0才會顯示紅點,等於0的話,紅點不會顯示的。

這乙個功能是ionic已經幫我們封裝好了,可以很方便的使用,但是像下面的在tab標籤上只是標註乙個紅點,代表有資訊更新的時候,這個就需要自己寫**實現了。

如下圖:

tabs-red-point依然是上面定義的類。指令的值等於true時,顯示紅點,指令的值等於false時不顯示紅點。

例如用法

head-red-point='true'>

ionic 自定義彈框

在工作過程中往往需要自定義的彈框。因此,將內容整理如下,以方便學習。若有不當之處,敬請斧正!思路 ionicpopup.show div class form content class input name input1 div class input area type number place...

自定義指令

像v if,v show等,是vue已經內建的指令,我們也可以使用directive來自定義指令 其中的blue要被引號所包裹,不然會被識別為變數來進行查詢全域性自定義指令 vue.directive focus vue.directive color var vm new vue 簡寫形式,代表我...

自定義指令

自定義指令有兩種方法 complieprovider.directive 指令名 function return restrict acem replace true,transclude true,template content return restrict acem replace true...