请教：如何理解实现滚动切换类的AngularJS指令？

我来帮你一步步拆解这个AngularJS指令的工作原理，把你的疑问都讲清楚：

1. restrict: 'A' 的作用 #

这行代码是用来指定指令的使用方式。AngularJS的指令支持4种声明形式：

• A：Attribute（属性），也就是把指令作为HTML元素的属性来使用，就像你代码里的<nav change-class-on-scroll ...>这样
• E：Element（元素），比如<change-class-on-scroll></change-class-on-scroll>
• C：Class（类），比如<nav class="change-class-on-scroll">
• M：Comment（注释），比如<!-- directive: change-class-on-scroll -->

这里设为'A'，就表示这个指令只能以属性的形式挂载到DOM元素上，其他方式不会被AngularJS识别。

2. 隔离作用域中 offset: "@" 和 scrollClass: "@" 的含义 #

这里的scope选项是给指令创建了一个隔离作用域，避免和父作用域的变量产生冲突。而@是一种单向绑定规则：

• offset: "@"：表示把DOM元素上offset属性的字符串值单向绑定到指令作用域的offset变量上。比如你HTML里写的offset="100"，指令scope里的offset就会拿到字符串"100"，所以代码里要用parseInt()把它转成数字来做滚动距离的比较。
• scrollClass: "@"：逻辑和上面一致，会把HTML中scroll-class属性的字符串值（也就是"navbar-transparent"）绑定到指令scope的scrollClass变量上。

3. 为什么HTML中的 scroll-class 能对应指令里的 scrollClass？ #

这是AngularJS内置的自动命名转换规则：
因为HTML的属性名不区分大小写，直接写驼峰格式（比如scrollClass）不符合HTML的书写习惯，所以AngularJS允许你在HTML中用短横线分隔的小写形式（scroll-class），框架会自动把它转换成JS里的驼峰命名（scrollClass）。反过来也成立，如果指令里的scope属性是myProperty，HTML里就可以写my-property来对应。

最后把整个逻辑串一遍，帮你彻底理清：

1. 页面加载时，AngularJS发现<nav>元素上有change-class-on-scroll属性（因为restrict: 'A'，所以识别为指令）。
2. 框架读取<nav>上的offset="100"和scroll-class="navbar-transparent"，通过@绑定分别赋值给指令作用域的offset和scrollClass。
3. 指令的link函数给window绑定了滚动事件监听。
4. 当你滚动页面时：
   • 如果滚动距离（pageYOffset）大于等于100，就给<nav>移除navbar-transparent类；
   • 如果滚动距离小于100，就给<nav>添加这个类。

内容的提问来源于stack exchange，提问作者Christopher Nelson