Building the plusOne Directive


#1

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.


#2

I'm having issues getting the button to work correctly.

It sounds like they want me to code this in the index.html, but the button never shows up:

<div class="post" ng-repeat="post in posts">
  <feedster-post post="post"></feedster-post>
  <plus-one></plus-one>  <!--This line right here -->
</div>

Using Chrome, I've inspected the button on their working example and their code uses the directive, which was never mentioned in step 8. Anyway, I've tried this code and it still doesn't work:

<div class="post" ng-repeat="post in posts">
  <feedster-post post="post"></feedster-post>
  <plusone-button></plusone-button>  <!--This line right here -->
</div>

What are the pieces that make the button work besides the plusOne.js and plusOne.html scripts already discussed in this thread?


#3

Below is the plusoneButton.js in the sample. I didn't find any difference. Besides I also have the same issue.
app.directive('plusoneButton', function() {return
{restrict: 'E',
scope: {},
templateUrl: 'js/directives/plusoneButton.html',
link: function(scope, element, attrs)
{scope.like = function() {element.toggleClass('btn-like');
} } }; });


#4

That was a good shout italian_dude3, I hadn't realised I had neglected to include the call in my HTML. I've made the edit now and it looks exactly like your code, i.e.

<plus-one></plus-one>

I'm not sure why your button isn't working - does the rest of your code look like mine? If not, do you want to post it and I'll see if I can spot any reason why it wouldn't be working.


#5

Hey, lord_chancellor! Thanks for responding back and also for your detailed original post on this topic.

I'm not sure what happen, but my previously broken code is now working. Not sure if there was a bug that got fixed, but I cannot reproduce my error any more.

Thanks for your help!


#6

Hey lord chancellor,

I have exactly the same code as you do.

My buttons appear beneath the posts and are clickable, but aren't toggled. Was that your issue as well? Did you fix it yet? What was the problem?


#7

I just answered my own question. The code I had was "scope.like = function() {
element.toggeClass('btn-like');"
}


#8

Thank you, @lord_chancellor for the clarification. It was very helpful.


#9

thanks a bunch for the tutorial m8


#10

Thank you SO MUCH for posting this!!!!! It would have taken me days (of how much time per day I can typically dedicate to coding, considering ramp-up time each day just to get back to where my mind was the previous day) to figure this out without your post! Also, in this instance it helped me better internalize the learning objectives by being able to do it quickly with the rest of the project.


#11

Thanks for the help lord_chancellor.

Found my issue fast:

app.directive('plusOne', function()

Not:

app.directive = ('plusOne', function()

Also, this post needed a bump.