Angular JS，手风琴和html内容

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

我究竟做错了什么？显然这里是一个新手，所以任何指针都会受到感谢。

谢谢，汤姆

来源

2015-12-11 TomBaine

你不能使用表达式（'{{}}'）来绑定任意的HTML内容。除非特别需要将HTML存储在变量（用户创建的内容）中，否则您应该坚持将HTML保留在模板中并且超出变量值。 – Claies

您应该使用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>

来源

2015-12-11 19:43:22

Angular JS，手风琴和html内容

回答

相关问题