My device specifications:
$ ionic info
Your system details:
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> </p>
<p> </p>
<p> </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';
});
}
}
}])
I am currently working on an application where I need to fetch data from a remote source via JSON. The content contains HTML markup tags which require proper formatting using the ng-html-bind directive. However, upon rendering the information, I encounter an issue where the page seems unscrollable. Even when attempting to bind the data without the ng-html-bind directive, scrolling remains disabled. Requesting assistance for this problem.