Question

您好我正在使用Ionic Framework进行混合应用程序，但我认为我的错误更多来自于角度。

我有这个观点：

<ion-view class="back" ng-controller="webCtrl" view-title="{{tipo[id].title}}">
    <ion-content>
      <ion-list>
        <div ng-controller="WebminarsCtrl">
          <div ng-repeat="group in groups">
            <ion-item class="item-dark" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}">
              <i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
                &nbsp;
                {{group.name}}
            </ion-item>
            <ion-item menu-close class="item-accordion" ng-repeat="item in group.items" ng-show="isGroupShown(group)">
              <p ng-bind-html="item.mapa"></p>
              <p ng-bind-html="item.contenido"></p>
            </ion-item>
          </div>
        </div>
      </ion-list>
    </ion-content>
  </ion-view>

但ng-bind-html无法正常工作，在我的控制器中我有这个：

.controller('WebminarsCtrl', function($scope, $state) {
  $scope.id = $state.params.id;
  $scope.groups = [];

  $scope.groups[0] = {
    name: 'Tec de Monterrey',
    items: []
  };

  $scope.groups[0].items[0] = {
    contenido:'Horarios',
    mapa: '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3764.2253262010768!2d-99.26264758551588!3d19.359393748034964!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d200c0fa04d82b%3A0x5e726f97d5cf3c8b!2sTecnol%C3%B3gico+de+Monterrey+Campus+Santa+Fe!5e0!3m2!1sen!2smx!4v1459638056684" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>'
  };
})

并且视图不显示变量所具有的地图，但是它的contenido变量没有问题。

任何帮助将不胜感激。

Answer 1

添加angular-sanitize.js Angular sanitize / ng-bind-html not working?

如果这没有帮助，请尝试使用$sce.trustAsHtml作为过滤器$sce

简单示例如何使用它而无需制作过滤器https://stackoverflow.com/a/18342738/5136207

离子从控制器变量传递到页面

1 个答案: