CODEWITHSUNDEEP
javascriptangularjs
nunya
nunya

Reputation: 315

Problems with Angular button

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

Upvotes: 1

Views: 170

Answers (2)

Noushad
Noushad

Reputation: 6781

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

Upvotes: 0

Dave Amit
Dave Amit

Reputation: 2319

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!

Upvotes: 3

Related Questions