popover實現條件觸發

要求:nonMandatoryInstrumentCheckList的長度爲0的時候,出現提示框。

難點

提示框使用的是popover,由於我們需要按照條件觸發這個提示框,所以就要考慮popover的觸發方式。但是觸發方式只能點擊觸發鼠標放上觸發,跟我們的要求不同。

解決過程

最開始google了一下,但是查到的都只有是bootstrap提供的原始jQuery函數,這是我們不希望使用的。最後找到了項目引用的js文件,是angular-bootstrap,然後找到了他的官方文檔,其中可以看到下面的設置項:

clipboard.png

popover-is-open控制提示框是否出現,這正是我們需要的:當滿足條件的時候,觸發提示框。

最後代碼如下:

<a class="btn btn-info btn-sm" popover-placement="top" uib-popover="請點擊添加較檢器具"  popover-is-open="data.nonMandatoryInstrumentCheckList.length === 0"><i class="fa fa-plus"></i>&nbsp;添加器具</a>

總結

重要的事情說三遍:

多看官方文檔!多看官方文檔!多看官方文檔!
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章