Problems with Angular button

Question

I'm creating my first Angular app and ran into a couple things that I just can't figure out. Whenever I include this:

<button ng-hide="results.length === projects.length" ng-click="limit = limit +3; gotoBottom()">Show More</button>

Inside of my template the app refuses to load but if I paste it anywhere outside of the template it works fine. I'd like to keep the button inside the template if at all possible so what on earth am I doing wrong?

Also, I'd like that button to also scroll to the #footer div and the ng-click doesn't seem to run this bit code:

$scope.gotoBottom = function() {
 $location.hash('footer');
 $anchorScroll();
};

I've created a Plunker of my code that can be found here:

https://plnkr.co/edit/MP4Pp4WLcn5EFb3pTEXx

Inside of the template, where?

Satej S
– Satej S

2016-03-08 05:01:06 +00:00
Commented Mar 8, 2016 at 5:01 — Satej S
– Satej S, Commented Mar 8, 2016 at 5:01

Dave Amit · Accepted Answer · 2016-03-08 05:22:12Z

3

By "template" if you are talking about projects template. Here is what you need to do.

Explanation:

The projects template need to have only one root element, so I added a div to wrap your project listing and show more button.

<div>
  <div class="cards" ng-init="limit = 3">
    <div class="card" ng-repeat="project in projects | limitTo: limit as results">
      <div class="card-image">
        <img src="{{project.img}}" alt="{{project.name}}" />
      </div>
      <div class="card-copy">
        <h2>{{project.name}}</h2>
        <p>{{project.desc}}</p>
        <p><a href="{{project.url}}" target="_blank"><i class="fa fa-location-arrow"></i></a></p>
      </div>
    </div>
  </div>

  <button ng-hide="results.length === projects.length" ng-click="limit = limit +3; gotoBottom()">Show More</button>
  <div id="footer" name="footer"></div>
</div>

For auto scroll: inject $timeout service

Explanation:

You did not had any div named footer so I added one just below the show more button and added a 100ms timeout, so that after your 3 projects load, it will scroll to the footer div. $timeout is very necessary because need to first render your projects and then scroll.

$scope.gotoBottom = function() {
  $timeout(function() {
    $location.hash('footer');
    $anchorScroll();
  }, 100);
};

Working Plunker: https://plnkr.co/edit/U3DDH57nh0Mqlpp2Txi4?p=preview

Hope this helps!

edited Mar 8, 2016 at 5:22

answered Mar 8, 2016 at 5:06

Dave Amit

2,31914 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nunya Over a year ago

Awesome.That helps out quite a bit. I wouldn't of even thought of adding a timeout. Thanks Dave.

Dave Amit Over a year ago

Welcome my friend! Keep up the awesome work that you are doing :)

Noushad · Accepted Answer · 2016-06-27 07:36:44Z

0

change the below code in projects.js

angular.module('portfolioApp')
     .directive('projects', function() {
       return {
        templateUrl: 'projects.html',
        controller: 'mainCtrl',
        replace: true // remove directive tags
        };
    });

to

replace: false

it should do the trick. Plunker Link here

edited Jun 27, 2016 at 7:36

answered Mar 8, 2016 at 5:58

Noushad

6,8614 gold badges30 silver badges28 bronze badges

Collectives™ on Stack Overflow

Problems with Angular button

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related