Question

我的系统信息：

$ ionic info

Your system information:

Cordova CLI: 6.2.0
Gulp version:  CLI version 3.9.1
Gulp local:  
Ionic Framework Version: 1.2.4
Ionic CLI Version: 2.0.0
Ionic App Lib Version: 2.0.0-beta.20
OS: Distributor ID: LinuxMint Description:  Linux Mint 17.1 Rebecca 
Node Version: v0.12.2

dailyDevotion.html：

<ion-view title="Daily Devotion" id="page2" class=" ">
    <ion-content padding="true" class="has-header"></ion-content>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <div class="list card " ng-repeat="devotion in devotions" >
            <ion-item class="item" >
                <h2>Daily Mass Reading</h2>
            </ion-item>
            <div class="item item-body">
                <p>
                    <div ng-bind-html="devotion.content" style="margin-top:0px;color:#000000;"></div>
                    {{ devotion.content }}
                </p>
            </div>

            <ion-item class="item-icon-left assertive  " >
                <i class="icon ion-music-note"></i>Share</ion-item>
        </div>
<!--         <h2>Daily Mass Reading</h2>

       <div ng-repeat="devotion in devotions">
          <div ng-bind-html="devotion.content" style="margin-top:0px;color:#000000;"></div>
       </div> -->
</ion-view>

controller.js

.controller('dailyDevotionCtrl', function($scope, $ionicLoading, InfoService, DevotionService) {
    // show ionic loader
    $ionicLoading.show({template: "Loading Daily Devotions..."});

    DevotionService.getAllItems().then(function (response) {

        if (response == 'loading error') {
            $scope.loadError = true;
            $ionicLoading.hide();
        } else {
            $scope.loadError = false;
            $scope.devotions = response;
            $ionicLoading.hide();
        }
    });

})

services.js

.service('DevotionService', ['$http', '$sce', function($http, $sce){

    var devotions =  [];
    var output = [];
    var BASE_URL = 'http://rss2json.com/api.json?rss_url=http%3A%2F%2Funiversalis.com%2Fatommass1.xml';

    return {
        getAllItems: function() {

            return $http.get(BASE_URL).then(function(response) {
                devotions = response.data.items;
                output = devotions;
                return output;
            }, function (error) {
                console.error(error);
                return 'loading error';
            });
        }
    }
}])

我正在构建一个应用程序，其中有一个页面，通过JSON从远程检索信息。数据中包含HTML标记，因此我决定使用ng-html-bind指令，以便正确格式化。但是，当呈现信息时，我无法滚动，页面被卡住了。即使我尝试使用{{}}正常绑定数据而不使用ng-html-bind，我仍然无法滚动。请帮忙。

Answer 1

解决方法是在＆lt; div＆gt;中使用overflow-scroll：auto，正如@gianlucatursi在评论中所提到的那样。

使用ng-html-bind

1 个答案: