Jade语法求助：如何在内联JavaScript中访问Angular变量？

嘿，这个问题我之前也踩过坑！核心原因是原生onclick属性里的Angular插值表达式不会被正确解析——原生DOM事件属性的执行上下文和Angular的作用域不兼容，再加上Pug的编译顺序干扰，导致你试的各种写法都失效。给你两个靠谱的解决方案：

方案1：用Angular的ng-click代替原生onclick（强烈推荐） #

这是最符合Angular最佳实践的做法，ng-click是Angular专门设计的事件指令，能直接访问当前ng-repeat作用域里的变量，完全不用折腾插值：

.factsheet(ng-repeat="factsheet in factsheets")
  a(ng-href="{{factsheet.link}}", ng-click="aFunction('click', factsheet.title)")

直接把factsheet.title作为参数传给aFunction就行，Angular会自动处理作用域绑定，完美解决变量访问问题。

方案2：如果必须用原生onclick（不推荐，但应急可用） #

要是有特殊场景非得用原生onclick，可以把变量存到元素的data属性里，再在onclick里读取：

.factsheet(ng-repeat="factsheet in factsheets")
  a(ng-href="{{factsheet.link}}", data-fact-title="{{factsheet.title}}", onclick="aFunction('click', this.dataset.factTitle)")

这里用data-fact-title存储title值，然后通过this.dataset.factTitle（或this.getAttribute('data-fact-title')）拿到实际变量值，绕开Angular插值在原生属性里的解析盲区。

为啥你之前的写法都不行？ #

• 直接写{{factsheet.title}}：Pug编译后，这个表达式会被当成纯字符串传给onclick，Angular不会再去解析它，最终执行的是aFunction('click', "{{factsheet.title}}")，传的是字符串而非变量值。
• 用Pug的#{factsheet.title}：这是Pug自身的插值，会在编译时执行，但此时Angular的factsheet变量还未渲染，所以会拿到undefined或空值。
• 加引号"{{factsheet.title}}"：本质和第一种情况一致，还是未被解析的字符串，Angular不会处理原生onclick里的插值逻辑。

内容的提问来源于stack exchange，提问作者Félix Paradis