Trying to set templateUrl to a dynamic URL


#1

Hi guys,

I have the following ‘for’ loop that generates a list of news articles from a json feed:

app.controller(‘NewsCtrl’, function ($scope, $ionicPopup) {

$.getJSON(
    'http://URL-FOR-NEWS-FEED',
    function(data){
        for(i=0; i<data.length; i++){
	var dataID = data[i].Id;
	$('#newsList').append(
		'<a class="item item-icon-left" href="/news/' + dataID + '">' + data[i].Title + '<br/>' + data[i].Leader + '<br/>' + data[i].Body + '</a>'
	);
			
$('body').append(
	'<script id="news/' + data[i].Id + '.html" type="text/ng-template"> \
		<ion-view title="NEWS ARTICLE" class="padding">\
			<ion-content>\
				data[i].Body\
			</ion-content>\
		</ion-view>\
	</script>');
				
}// close for loop });});

I have the '.state. set up as follows:

.state('tabs.article', {
    url: "/news/:newsId",
	views: {	
		'home-tab': { // the main view
			templateUrl: "news.article.html",
			controller: function($scope, $stateParams) {
				  $scope.newsId = $stateParams.newsId;
				  console.log($scope.newsId);
			}
		}
	}
})

I’m trying to get the templateUrl to pick up the newsId from whichever article is clicked. I only seem to be able to do it using an absolute URL. Is there a way to set the templateUrl to anything other than a string so I can include the newsId variable?

Thanks very much for your help!


#2

I’m confused here. Why are you dynamically generating template names? Couldn’t you just make the $http call inside your controller, and then conditionally do the same thing in your template? I think you’re mixing concerns here.

Additionally, in your state definition you can pass a function to the controller config which returns a template string (if that’s the route you choose to go down).

  1. Fetch your data in your controller.
  2. Use your template to repeat over your data and display it. (don’t use DOM manipulation)

#3

thanks for the reply. I’m abit unsure what you mean by add the $http call inside the controller?


#4

I would read up on a basic Angular tutorial before diving into Ionic. Seems that you’re missing a few key points.
The way that you’re currently doing things is a bit against the Angular Way. You could do something like this:

.state('tabs.article', {
    url: "/news/:newsId",
    views: {    
        'home-tab': { // the main view
            templateUrl: "news.article.html",
            controller: function($scope, $http, $stateParams) {
                  
                $http.get('yourjsonfeed').success(function(response) {
                    $scope.newsItems = repsonse.data;    // contains your data
                })

            }
        }
    }
})

// your template
<ion-view title="NEWS ARTICLES" class="padding">\
    <ion-content>\
        <ion-list>
            <ion-list-item ng-repeat="newsItem in newsItems">
                {{ newsItem.body }}
            </ion-list-item>
        </ion-list>
    </ion-content>\
</ion-view>\

#5

@Dave - I am trying something similar but not having any luck:

templateUrl: function($stateParams) {
   return 'templates/'+$stateParams.url ;
}

even:

templateUrl: ['$stateParams',function($stateParams) {
  console.log("Menu :"+$stateParams.url) ;
  return 'templates/'+ $stateParams.url ;
}],

You can see more details in my thread here: How to dynamically pass parameter to ionic tabs templateUrl?