Angular页面无法在长内容的ng-bind-html上滚动

时间:2016-02-09 09:02:24

标签: javascript html angularjs ionic-framework

我有这个控制器。

angular.module('nkgen.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {

  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //$scope.$on('$ionicView.enter', function(e) {
  //});
})
.controller('ContentController', function($scope, $stateParams, contentIndex, contentHtml) {
  var contentIndexData = {};
  var htmlcontent = {};

  contentIndexData = {
    id: $stateParams.contentId,
    name: $stateParams.contentName
  };

  $scope.content = contentIndexData;
  delete contentIndexData;

  $scope.htmlcontent = {body: 'Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>Loading...<br><br>'};
  delete htmlcontent;
})

这是html模板。 (我目前的html模板)。

<ion-view view-title="{{content.name}}">
  <ion-content ng-bind-html="htmlcontent.body | sanitize" class="page-content-container padding-horizontal">
  </ion-content>
</ion-view>

如果我使用......

<ion-view view-title="{{content.name}}">
  <ion-content class="page-content-container padding-horizontal">
    {{htmlcontent.body | sanitize}}
  </ion-content>
</ion-view>

页面正常运行。它可以滚动但不能渲染html - 滚动仅适用于Chrome,但不适用于其他。

如果我使用我当前的html模板,它可以呈现html但无法滚动。

如何在长内容上滚动它并渲染html?

1 个答案:

答案 0 :(得分:3)

你有没有尝试过:

<span  ng-bind-html="htmlcontent.body | sanitize"></span>

离子内容?