How to load a html template into the $scope? - angularjs

Question

I'm trying to populate an ion-content container. I want to load HTML into the $scope depending on which tab the user clicks:
<ion-tabs tabs-type="tabs-icon-only">
<ion-tab ...>
<ion-tab title="Create" icon-on="ion-android-create">
<ion-content padding="true" class="has-header">
{{getCreate}}
</ion-content>
</ion-tab>
<ion-tab ...>
</ion-tabs>
This is the controller for this view:
(function () {
'use strict';
angular.module('ionicApp')
.controller('HomePageController', ['$scope', '$state', '$templateCache', HomePageController]);
function HomePageController($scope, $state, $templateCache) {
$scope.getCreate = function() {
// at the moment create.html is just simple static html.
return $templateCache.get('app/views/home/ads/create.html');
//return $templateCache.get('main.create'); // this also doesn't work
};
}
})
();
The two relevant states are defined as:
.state('main.home', {
url: '/home',
views: {
'main': {
templateUrl: 'app/views/home/home.html',
controller: 'HomePageController'
}
}
})
.state('main.create', {
url: '/create',
views: {
'main': {
templateUrl: 'app/views/home/ads/create.html',
controller: 'CreateAdController'
}
}
})
Am I going about this incorrectly? What do I need to do to load create.html into $scope.getCreate in my HomePageController?

Answer 1

your approach seems a bit too complicated to me.
first of all you would have to make sure that your template has been loaded to $templateCache. this only happens when the template is rendered for the first time somewhere in the app (for example by using the "templateUrl" property)
alternatively you could fetch the data from the file by an ajax call on your own and compile it with the given $interpolate, $compile functions from angular. but then again: this seems way too complicated for this case.
secondly you would have to use ng-bind-html instead, because the way you did it there would be sanitized html to be seen. so there would be stuff like
etc instead of a compiled html version of it.
probably you should simply use the ng-include directive instead and everything will be fine in a blink of an eye ;)

Answer 2

As raised by #Patrick Kelleter, your approach is overly complex including working manually with the $templateCache and compiling HTML.
Why not use the router the way it's designed?
First, rename the state's view so that you can reference it explicitly:
.state('main.create', {
url: '/create',
views: {
'create': {
templateUrl: 'app/views/home/ads/create.html',
controller: 'CreateAdController'
}
}
})
Then change state using ui-sref= on the tab, and insert the state's template using <ion-nav-view ...> with the specially named view.
<ion-tabs tabs-type="tabs-icon-only">
<ion-tab ...>
<ion-tab title="Create" icon-on="ion-android-create" ui-sref="main.create">
<ion-content padding="true" class="has-header">
<ion-nav-view name="create"></ion-nav-view>
</ion-content>
</ion-tab>
<ion-tab ...>
</ion-tabs>
The router will then insert the content of app/views/home/ads/create.html into the <ion-nav-view name="create"> element when the tab is clicked.
Here is a full walkthrough: Build an App with Navigation and Routing - Part 1

Answer 3

Simply use $http.get:
$http.get($scope.template.url).then (function(response) {
console.log(response);
$scope.contents = response.data;
});
The DEMO on PLNKR.
The browser's Same Origin Policy and Cross-Origin Resource Sharing (CORS) policy may restrict whether the template is successfully loaded.