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>

赶快试试吧