Angular與bootstrap輪播圖的結合使用
阿新 • • 發佈:2017-09-16
ellipsis src inner turn 輪播 logo 視覺 nbsp upload
在做項目中碰到一處這樣的bootstrap的輪播圖的使用,數據要用angular動態綁定上去。公司logo圖片,職位,公司名稱
記錄下做完後踩的坑。
1. 首先是使用bootstrap的輪播圖示例代碼進行改造
<div id="myCarousel" class="carousel slide" interval="false"//此次不需要自動輪播,添加此聲明 data-pause="pause" //鼠標懸停後移出後不需要重新激活即時,添加此聲明> <!-- 輪播(Carousel)指標 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol>//此為輪播圖下的小圓點,點擊可跳轉,此次不需要 <!-- 輪播(Carousel)項目 --> <div class="carousel-inner"> <div class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> </div> </div> <!-- 輪播(Carousel)導航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev" ng-non-bindable onclick="return false"
//使用了angular框架,由於有路由設置,導致點擊後會跳轉至頭部,因為a的href會引起路由中$urlRouterProvider.otherwise()設置的反應,return false表示阻止瀏覽器對事件的默認處理;在超鏈接中加上onclick="return false;"可以阻止打開超鏈接。> ? </a>
<a class="carousel-control right" href="#myCarousel" data-slide="next" >? </a> </div>
2. 關於輪播圖 css代碼的改造
這裏bootstrap的輪播導航a標簽對於輪播圖的反應有一個怪異的影響。這裏的a如果上下沒有與slide的上下重合的話,點擊a進行slide切換時下一張slide切進來最終會有一個卡頓的視覺效果,所以將其寬度設置為0後,通過調整a中包含的img標簽的位置來達到ui圖的效果
3.angular 中的綁定問題
img 中的ng-src 需要使用 ng-src="{{}}"的格式以實現ng-bind的效果
4. 文字省略的問題
有些文本過長使盒模型撐高,此時需要添加
white-space: nowrap; 文本不會換行,文本會在在同一行上繼續,直到遇到 <br> 標簽為止。
overflow:
text-overflow: ellipsis 屬性規定當文本溢出包含元素時發生的事情。顯示省略符號來代表被修剪的文本。
Angular與bootstrap輪播圖的結合使用