Question

我想在我的Ionic / Angular JS应用程序中创建一个手风琴，其中隐藏的项目是html格式的文本块。我找到了Angular JS代码来构建手风琴，但是这些例子都使用数值来填充手风琴的内容。当我将html标签和文本添加到测试内容时，我得到一个字符串，而不是表达html。我已经尝试了清理字符串（虽然不确定我是否有正确的上下文），但这并没有改变它的外观。

我的相关js（我已经离开手风琴的揭示/隐藏代码）是：

var myapp = angular.module('myapp', ['ionic','ngSanitize'])
myapp.controller('ListCtrl',function($scope, $sce){
  $scope.groups = [{title: 'Background'}];
  $scope.items = [{bkgtxt:  $sce.trustAsHtml('<p><strong>Do not guess</strong></p>')}];
});

我的HTML（仅限一个手风琴项目）是：

<ion-list ng-controller="ListCtrl">
    <div ng-repeat="group in groups">
        <ion-item class="item-stable"
           ng-click="toggleGroup(group)"
           ng-class="{active: isGroupShown(group)}">
           <i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
           &nbsp; {{group.title}}
        </ion-item>
        <ion-item class="item-accordion"
           ng-repeat="item in items"
           ng-show="isGroupShown(group)">
           {{item.bkgtxt}}
        </ion-item>
      </div>
    </ion-list>

我做错了什么？显然这是一个新手，所以任何指针都会感激不尽。

谢谢，汤姆

Answer 1

你应该使用ng-bind-html指令将html绑定到元素，不需要像你已经那样对html内容进行清理。

<强>标记

<ion-list ng-controller="ListCtrl">
    <div ng-repeat="group in groups">
        <ion-item class="item-stable"
           ng-click="toggleGroup(group)"
           ng-class="{active: isGroupShown(group)}">
           <i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
           &nbsp;<span ng-bind-html="group.title"><span>
        </ion-item>
        <ion-item class="item-accordion"
           ng-repeat="item in items"
           ng-show="isGroupShown(group)" 
           ng-bind-html="item.bkgtxt">
        </ion-item>
    </div>
</ion-list>

Angular JS，手风琴和HTML内容

1 个答案: