Ok, when I got to the last section of the Feedster app I was actually totally stuck for what to do and had to go back over the Directives course for reference. Just in case anyone else experiences this, I thought I'd lay down the code I used to complete this section.
plusOne.js:
app.directive('plusOne', function() {
return {
restrict: 'E',
scope: { },
templateUrl: 'js/directives/plusOne.html',
link: function(scope, element, attrs) {
scope.like = function() {
element.toggleClass('btn-like');
}
}
};
});The general make-up of the directive is exactly as it has been so far, the only thing that is new is building the link function. I felt that the wording of the challenge wasn't overly clear on the objectives here - the key is to make the link option a function, and then to build a function inside this, called like, that toggles the btn-like class.
plusOne.html:
<button class="btn" ng-click="like()">+1</button>This is totally simple code. Again, the only thing to note is that when we call ng-click, we need to make sure to include a function call with ng-click="like()".
index.html:
Two things to do here. First, we need to reference the new plusOne directive in the HTML, right below the call to the feedsterPost directive:
<div class="post" ng-repeat="post in posts">
<feedster-post post="post"></feedster-post>
<plus-one></plus-one>
</div>Then finally, we need to include the call to add the new directive:
<script src="js/directives/plusOne.js"></script>Worth mentioning a reminder to include the script tag in the main index.html, only because I spent about 30 minutes yesterday trying to bug-fix an earlier challenge , where it was this call that was in error.
I hope this is useful to anyone who might have found this final section of the Directives challenge to be tricky.