Running an <ion-item> Ionic directive after HTML binding


#1

I’m working with a Ionic app that uses an external API to retrieve the data. The API can be easily controlled thru a front-end interface. Because it’s so easy to maintain the data on the backend side, it’s very tempting to store even entire Ionic HTML template files in a JSON - encoded string.

The problem is, even though I retrieve the HTML code and display it on the template page, the Ionic directives don’t seem to work( for eg.). They don’t compile and that seems reasonable as the DOM tree is already formed.

What I strive for is to bind the HTML string that I get from the API with a specific template view, but also compiling the Ionic directives in it.

Is what I’m trying even fundamentally possible, in the context of the Ionic plaform?

Below is the code that I’m trying to use:

1. The Service (what I use to fetch the data) - nothing ambiguous here, only a function to connect and retrieve data from the API.

.service('KigoFetch', function($q, $http, $timeout) {
	// Basic function to save the JSON data
	function storeProperty2(data) {
		window.localStorage["readProperty2"] = JSON.stringify(data);
	}
    this.readProperty2 = function(propID) {
		return $q(function(resolve, reject) {
		    $http.defaults.headers.common.Authorization = 'Basic ' + btoa('test' + ':' + 'test');
			return $http({
				url: '/someURL',
				dataType: 'json',
				method: 'POST',
				data: JSON.stringify({PROP_ID : someID}),
				headers: {"Content-Type": "application/json"}
		    }).then(function successCallback(response) {
				if(response.data["API_REPLY"]) {			
					storeProperty2(response.data["API_REPLY"]);		
				    resolve("Succes for readProperty");
				} else 
					reject("Failure for readProperty");
			    }, 
                function errorCallback(response) {
					console.log("Error connecting to server - " + response);
					reject("Login failed");
			});
	  	});  		
	}
});

2. The Controller - probably here is the problem with the “trustAsHtml” method.

.controller('generalContent', ['$scope', '$sce', '$stateParams', 'KigoFetch', function ($scope, $sce, $state,KigoFetch) {
    $scope.$on("$ionicView.beforeEnter", function() {
	    // With this I parse the HTML
	    $scope.to_trusted = function(html_code) {
							    return $sce.trustAsHtml(html_code);
						    }

	if(typeof window.localStorage['readUDPA'] !== "undefined") {
		$scope.arrival = window.localStorage['readUDPA'];
	} else {
		$scope.readReservation = JSON.parse(window.localStorage['readReservation']);
		$scope.arrival = [{txt: 'Loading..'}];
		KigoFetch.readProperty2($scope.readReservation['API_REPLY']['PROP_ID']).then(
		    function(res){
		      $scope.results = res;
		      $scope.readProperty2 = JSON.parse(window.localStorage['readProperty2']);
              $scope.prop_udpa = $scope.readProperty2.PROP_UDPA;
              
              // just a quick way to find an object attribute in an array of objects
              for(var i=0; i < $scope.prop_udpa.length;  i++) {
					if($scope.prop_udpa[i].hasOwnProperty('UDPA_TEXT') &&($scope.prop_udpa[i].UDPA_TEXT).indexOf("kitchenGuide") !== -1) {
						$scope.prop_udpa = JSON.parse($scope.prop_udpa[i].UDPA_TEXT);
						$scope.arrival = $scope.prop_udpa.arrival;
						window.localStorage["readUDPA"] = $scope.arrival;
						break;
					}
				}
		    },
		    function(err){
		      console.error(err);
		    }
	    )
	}
});
}])

**3. The Ionic View** - here the HTML is rendered correctly with the exception of ionic directives(like ion-view)
<ion-view title="House Guide" id="page9" cache-view="false">
    <ion-content padding="false" class="manual-remove-top-padding has-header">
        <span ng-bind-html="to_trusted(arrival)"></span>
    </ion-content>
</ion-view>