在做項目中碰到一處這樣的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: hidden; 加上這個才能顯示省略號

text-overflow: ellipsis 屬性規定當文本溢出包含元素時發生的事情。顯示省略符號來代表被修剪的文本。

Angular與bootstrap輪播圖的結合使用