Jade文件中Angular渲染的单选按钮无法点击问题求助

嗨，我来帮你排查下这个问题！既然换成纯HTML就正常，那大概率是Jade模板的语法细节没处理对，导致生成的HTML结构不符合Angular单选按钮的要求。我整理几个最常见的坑，你对照着检查下：

• 单选按钮的name属性是否正确生成？
  Angular的单选按钮组依赖相同的name属性来分组，Jade里的插值语法和HTML不一样，很容易在这里出错。比如你如果用了Angular的{{}}插值，Jade会把它当成普通文本输出，而不是解析成动态值。正确的Jade插值应该用#{}：

// 错误写法：Angular插值在Jade里不会被正确解析
each question in questions
  input(type='radio', name='answer-{{question.id}}', ng-model='question.selected', value='yes')

// 正确写法：用Jade的#{}插值生成name属性
each question in questions
  input(type='radio', name='answer-#{question.id}', ng-model='question.selected', value='yes')
  input(type='radio', name='answer-#{question.id}', ng-model='question.selected', value='no')

如果name属性没正确生成，所有单选按钮可能处于同一组或者分组混乱，自然无法正常选中。

• ng-model的绑定路径是否正确？
  要是你用Jade的each循环而非Angular的ng-repeat，得确保每个单选按钮的ng-model绑定到了当前循环的question对象属性上，而不是父作用域的变量。比如如果循环时作用域没正确传递，所有按钮可能绑定到同一个变量，点击后不会有预期的响应。

• 检查生成的HTML结构差异
  打开浏览器开发者工具，查看Jade渲染后的HTML源代码，和你正常工作的纯HTML版本做对比：

  • 看看name、ng-model、value这些关键属性是否正确渲染，有没有拼写错误（比如把ng-model写成ngmodel）
  • 有没有多余的嵌套标签或者闭合错误，比如Jade自动缩进生成了意外的父元素，影响了单选按钮的交互

• 是否有元素覆盖了单选按钮？
  有时候按钮能显示，但可能有透明的容器元素（比如div、span）覆盖在上面，导致点击事件无法传递给单选按钮。你可以在开发者工具里选中单选按钮，查看它的层级（z-index），或者用“检查元素”的点击功能，确认实际触发点击的是不是单选按钮本身。

你可以先从对比HTML结构入手，这是最快定位问题的方法。如果还是找不到原因，把你的Jade代码和Angular对象结构贴出来，我再帮你进一步分析！

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