Question

所以我试图使用指令，我在互联网上找到的所有内容与我所拥有的内容完全相同。

这是我的指示：

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;
        });
     }
  }
}]);

这就是我想要调用指令的方式：

<button scrollBottom>Click me!</button>

但可悲的是，它甚至不起作用。你们看到问题吗？因为我在控制台中没有收到任何错误。

Answer 1

你做错了。您是将此单击处理程序添加到页面上的每个“a”元素。您只需将此事件添加到您的指令中。你可以实现

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;
    });
 }
 }
}]);

顺便说一下你在html上错误地使用你的指令。 camel基于指令名称转换为html上的camel-casing。所以你需要使用你的指令

scroll-bottom

编辑：我简化了scrollTop代码

Answer 2

您需要将驼峰案例拆分为破折号，如下所示：

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

你在控制台中看不到任何错误，因为它只是一个没有任何意义的普通属性。

Answer 3

除此之外你不应该通过

来调用你的指令

<button scrollBottom>Click me!</button>

但

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

你还必须检查，在控制台中应该是App模块不可用的例外，这是因为你必须从

更改指令创建

angular.module('App');

App.directive

向

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

app.directive

尝试使用angularjs指令，而不是真的有效

3 个答案: