CODEWITHSUNDEEP
angularjsangularjs-directivedirective
RiesvGeffen
RiesvGeffen

Reputation: 1589

Trying out an angularjs directive, not really working

So I'm trying to work with a directive, everything I found on the internet looks quite the same as what I've got.

This is the directive I made:

angular.module('App');

App.directive("scrollBottom", ["$interval", function ($interval) {
return {
    restrict: "A",
    link: function (scope, elem, attrs) {
        $('a').click(function () {
            $('html, body').animate({
                scrollTop: $($(this).attr('#myAnchor')).offset().top
            }, 40000);
            return false;
        });
     }
  }
}]);

This is how I wanted to call the directive:

<button scrollBottom>Click me!</button>

But the sad part is that it doesn't even work. Do you guys see the problem ? Because I don't get any errors in the console.

Upvotes: 1

Views: 46

Answers (3)

bahadir
bahadir

Reputation: 719

you are doing it wrong. you are adding this click handler to every "a" element on page. you need to add this event only to your directive. which you can achieve as

var app = angular.module('App');

app.directive("scrollBottom", [function () {
return {
restrict: "A",
link: function (scope, elem, attrs) {
    $(elem).click(function () {
        $("html, body").animate({
                scrollTop: 0
            });
        return false;
    });
 }
 }
}]);

by the way you are using your directive incorrectly on your html. camelCasing on a directive name converts to camel-casing on html. so you need to use your directive as

scroll-bottom

edit: i simplified scrollTop code

Upvotes: 3

Diana R
Diana R

Reputation: 1174

Beside tha fact that you should call your directive not via

<button scrollBottom>Click me!</button>

but

<button scroll-bottom>Click me!</button>

you also have to check, in console should be an exception something like App module not available, that is vecause you have to change the directive creation from

angular.module('App');

App.directive

Into

var app = angular.module('App');

app.directive

Upvotes: 0

Omri Aharon
Omri Aharon

Reputation: 17064

You need to split the camel case into dashes, like this:

<button scroll-bottom>Click me!</button>

You don't see any errors in the console because it is just a plain attribute that means nothing.

Upvotes: 0

Related Questions