So here is where my code stands so far:
My details view controller:
(function() {
var DetailsController = function($scope, $http, $routeParams, $sce,
dataFactory) {
storyId = $routeParams.itemId;
nextItem = $routeParams.itemId++;
$scope.stories = [];
function init() {
dataFactory.getStories().success(function(stories) {
$scope.stories = stories.articles;
$scope.whichItem = storyId;
//$scope.theID = $scope.stories[$scope.whichItem].PostID;
$scope.nextArticle = nextItem;
$scope.totalList = stories.articles.length;
$scope.SkipValidation = function(value) {
return $sce.trustAsHtml(value);
};
})
.error(function(data, status, headers, config) {
$log.log(data.error + ' ' + status);
});
$scope.todaysDate = new Date();
//assign the steam id
$scope.streamid = $routeParams.itemId;
$scope.params = {
categoryID: 'Articles',
streamID: $scope.streamid,
version: 2,
containerID: 'commentsDiv',
cid:'',
enabledShareProviders: ''
};
}
init();
};
DetailsController.$inject = ['$scope', '$http', '$routeParams', '$sce',
'dataFactory'];
angular.module('myApp')
.controller('DetailsController', DetailsController);
}());
My Directive:
angular.module('myApp').directive('gigdirective', function () {
return{
template:"<div id='commentsDiv'></div>",
scope:{
"gigparams":"="
},
link:function(scope,ele,attr){
/* uncomment the below code once you finish development */
console.log(scope.gigparams);
gigya.comments.showCommentsUI(scope.gigparams);
}
}
});
And my partial that handles the details:
<section ng-model="articles" class="story-details" id="main">
<div class="article-nav"><a class="prev-article"
href="#/details/{{stories.indexOf(stories[nextArticle-1])}}"
ng-disabled="whichItem == 0">Previous Story</a> <a
href="#/details/{{stories.indexOf(stories[nextArticle+1])}}"
class="next-article" ng-disabled="stories[nextArticle+1] ==
undefined">Next Story</a></div>
<article id="main-article" data-post-id="{{stories[whichItem].PostID}}">
<h2>{{stories[whichItem].title}}</h2>
<div class="date">Posted on {{stories[whichItem].pubDate | date:"MMMM
d',' yyyy '@' h:mm a" }}</div>
<div class="sharing-widget">
<a class="facebook_custom"
href="https://www.facebook.com/sharer/sharer.php?u={{stories[whichItem].link}}";></a>
<a class="twitter_custom" href="https://twitter.com/home?status=Via:
@radar_online: {{stories[whichItem].title}}:
{{stories[whichItem].link}}"></a>
<a class="plusone_custom"
href="https://plus.google.com/share?url={{stories[whichItem].link}}";></a>
<a class="pinterest_custom"
href="https://pinterest.com/pin/create/button/?url={{stories[whichItem].link}}&media={{stories[whichItem].featuredImage}}&description={{stories[whichItem].title}}";></a>
<!-- <a class="tumblr_custom"
href="http://www.tumblr.com/share/link?url={{stories[whichItem].link}}";></a>
-->
<a class="email_custom" href="mailto:?&subject=I wanted you to see this
article.&body=Check out this article: {{stories[whichItem].title}}
{{stories[whichItem].link}}." title="Share by Email"></a>
</div>
<img height="169" width="300" class="lead"
ng-src="{{stories[whichItem].featuredImage}}">
<span
ng-bind-html="SkipValidation(stories[whichItem].description)"></span>
<div class="author"><img ng-src="{{stories[whichItem].authorPhoto}}">
<span>By {{stories[whichItem].byline}}</span></div>
</article>
{{stories[whichItem].PostID}}
<div class="article-nav"><a class="prev-article"
href="#/details/{{stories.indexOf(stories[nextArticle-1])}}"
ng-disabled="whichItem == 0">Previous Story</a> <a
href="#/details/{{stories.indexOf(stories[nextArticle+1])}}"
class="next-article" ng-disabled="stories[nextArticle+1] ==
undefined">Next Story</a></div>
<div gigdirective gigparams="params" ></div>
</section>
As this code stands this works by setting
$scope.streamid = $routeParams.itemId;
However, itemID is reused on this app because the feed gets replaced with
the latest 50 articles of our public site. The feed, however has a PostID
for each article that will always be a unique number that we can use aas
streamID forever. it will never change for the said article.
The problem is that PostID is undefined at the Controller stage and at the
Directive stage. That value only exists after Angular compiles and makes it
available to my partial.
The question is, can that value be accessed or made available as a
placeholder of sorts until the view is rendered and somehow make this work?
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
