ionic ng-bind-html

来源：互联网发布：淘宝原产地政府背书编辑：程序博客网时间：2024/05/23 11:50

1、ionic ng-bind-html 指令

ng-bind-html 指令是通一个安全的方式将内容绑定到 HTML 元素上。

2、html

<element ng-bind-html="model.htmlStr"></element><element ng-bind-html="formatProperty(item.VendorInfo.Property)"></element><span class="item-note text-orange" ng-bind="formatPaymentType(model.deliveryDetail.PaymentTypeId)"></span><span class="badge badge-assertive"><i class="icon ion-flash"></i>&nbsp; {{formatOrderState(model.deliveryDetail.OrderState)}}</span>

3、controller

app.controller('MessageCtrl', function ($scope, $sce) {    $scope.model = {        "htmlStr": $sce.trustAsHtml('<i class="icon ion-tips">hello</i>')    };    $scope.displayProperty = function (property) {        switch (property) {            case 1:                return $sce.trustAsHtml('<i class="icon ion-tips">hello</i>');            case 2:                return $sce.trustAsHtml('<i class="icon ion-tips">world</i>');            case 3:                return $sce.trustAsHtml('<i class="icon ion-tips">hello</i> <i class="icon ion-tips">world</i>');            default:                return $sce.trustAsHtml('<i class="icon ion-tips">hello</i>');        }    }    $scope.formatPaymentType = function (type) {        switch (type) {            case 1:                return "货到付款";            case 2:                return "在线支付";            case 3:                return "在线支付";            case 4:                return "在线支付";            case 5:                return "代金券";            default:                return "在线支付123";        }    }    $scope.formatOrderState = function (type) {        switch (type) {            case 0:                return "等待商户响应";            case 1:                return "交易已完成";            case 2:                return "商户已接单";            case 3:                return "商户已接单";            default:                return "555666";        }    }});

0 0