javascript - 理解这个 AngularJS 指令？

Question

我有一个指令，当前正在努力在您滚动通过页面的一部分后更改 HTML 类元素。我基本上只是从我在互联网上找到的代码中破解代码，但我无法理解它为什么或如何工作。我知道如果我能更好地理解它，我可以尝试为我的项目更有意义的方面重新创建它。如果有人能提供任何见解，我将不胜感激。下面是 Angular 部分:

myApp.directive('changeClassOnScroll', function ($window) {
return {
    restrict: 'A',   // What does this line do?
    scope: {
        offset: "@",   // A bit confused here
        scrollClass: "@"   // a bit confused here
    },
    link: function(scope, element) {
        angular.element($window).bind("scroll", function() { // understood
            if (this.pageYOffset >= parseInt(scope.offset)) { // understood
                element.removeClass(scope.scrollClass); // understood
                console.log('Scrolled below header.');
            } else {
                element.addClass(scope.scrollClass); // understood
            }
        });
      }
   };
})

在 HTML 中；

<nav change-class-on-scroll offset="100" scroll-class="navbar-transparent" class="navbar">
<!-- Don't understand why this works at all since these two elements are
<!-- not the same names as the function above? How does the directive
<!-- know to look for 'scroll-class' even tho in the directive it is
<!-- 'scrollClass' ?

对于它发生了什么，我们将不胜感激。

Answer 1

来自文档

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.

您编写的是标准的 angularjs 代码，用于创建自定义指令，为您的 dom 添加一些功能。

restrict: 'A', // What does this line do?

'A' 代表属性。这意味着您可以将其用作 html 元素的属性，就像您用于 nav 一样。您可以在指令中使用以下任何限制。

A - Attribute => <div change-class-on-scroll></div>

C - Class     =>  <div class="change-class-on-scroll"></div>

E - Element   =>  <change-class-on-scroll data="book_data"></change-class-on-scroll>

M - Comment   => <!--directive:change-class-on-scroll --><br/>

scope: {
offset: "@", // A bit confused here
scrollClass: "@" // a bit confused here
},

'@' 在这里用于将 html 中的数据绑定(bind)到指令范围。使用 offset="100"，您可以使值 100 在指令范围内可用，然后当您在链接函数中调用 scope.offset 时，您会得到值(value)。您可以使用“@”、“=”或“&”根据指令是确定值、模型数据还是函数来将值绑定(bind)到指令。

why scroll-class when in directive it is scrollClass

之所以有效，是因为它应该如此。根据 Angularjs 的命名约定，指令名称和要绑定(bind)的范围对象在您的 js 中应该使用驼峰式大小写，并且在您的 html 中应该使用破折号编写。