angular—— 当ng-src图片路径为空 设置默认图片

<!--
  Created by nannan on 16/3/14.
-->
<ion-view hide-tabs="true" id="page-find-topic-or-activity-list" view-title={{inParams.pageTitle}}>
    <ion-content>
        <section>
            <div class="topic_list" ng-repeat="item in data.items" ng-click="action.toPage(inParams.pageTitle,'tab.home-recommend-topic-detail')">
                <img ng-src="{{item.img}}" src="" err-src="img/sample/home_cover.png"  alt="活动" class="full-image"/>
                <p ng-if="inParams.pageTitle == '话题精选'" class="flex_box topc_info">
                    <span class="list_item topc_title">{{item.title}}</span>
                    <i class="list_sub_item topc_date">{{item.time}}</i>
                </p>
            </div>
        </section>
    </ion-content>
</ion-view>

重点:得预留src的位置。(http://www.cnblogs.com/GoodPingGe/p/4529265.html)

<img ng-src="{{item.img}}" src="" err-src="img/sample/home_cover.png"  alt="活动" class="full-image"/>
/**
 * Created by nannan on 16/3/13.
 */
angular.module('MrTrustApp.directives')

    //TODO 隐藏tabs
    .directive('errSrc', function($rootScope) {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element.bind('error', function() {
                    console.log(9);
                    if (attrs.src != attrs.errSrc) {

                        attrs.$set('src', attrs.errSrc);
                    }
                });
            }
        };
    })

;

 方法二:不需要js

<!--
  Created by nannan on 16/3/14.
-->
<ion-view hide-tabs="true" id="page-find-topic-or-activity-list" view-title={{inParams.pageTitle}}>
    <ion-content>
        <section>
            <div class="topic_list" ng-repeat="item in data.items" ng-click="action.toPage(inParams.pageTitle,'tab.home-recommend-topic-detail')">
                <img ng-src="{{item.img}}" src="" onerror="this.src='img/sample/home_cover.png'" alt="活动" class="full-image"/>
                <p ng-if="inParams.pageTitle == '话题精选'" class="flex_box topc_info">
                    <span class="list_item topc_title">{{item.title}}</span>
                    <i class="list_sub_item topc_date">{{item.time}}</i>
                </p>
            </div>
        </section>
    </ion-content>
</ion-view>
<img ng-src="{{item.img}}" src="" onerror="this.src='img/sample/home_cover.png'" alt="活动" class="full-image"/>
posted @ 2016-04-26 14:18  四叶草Clover  阅读(6028)  评论(0编辑  收藏  举报