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?
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).
Fetch your data in your controller.
Use your template to repeat over your data and display it. (don’t use DOM manipulation)
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>\