AngularJS添加圖片鏈接

　　<ul class="phones">
          <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
            <a href="#/phones/{{phone.id}}" class="thumb"><img src="{{phone.imageUrl}}"></a>
            <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
            <p>{{phone.snippet}}</p>
          </li>
　　</ul>

如果我們僅僅用一個正常src屬性來進行綁定（<img class="diagram" src="{{phone.imageUrl}}">），這個表達式被放入src的話，最終得到的圖片URL為：http://localhost:8000/app/{{phone.imageUrl}}。這是因為瀏覽器會把AngularJS的{{ 表達式 }}標記直接進行字面解釋，並且發起一個向非法的請求。

棒棒的AngularJS為我們提供了ngSrc命令（對應ng-src屬性），有了這個ngSrc指令會避免產生這種情況，使用ngSrc指令防止瀏覽器產生一個指向非法地址的請求。

　　<ul class="phones">
          <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
            <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
            <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
            <p>{{phone.snippet}}</p>
          </li>
    </ul>

趕快試試吧