为什么AngularJS双向绑定指令组件中不能使用同名绑定属性？

• 核心问题出在你使用的绑定属性名autoplay是HTML标准定义的原生布尔属性，同时AngularJS也对这类原生媒体属性有内置的特殊处理逻辑，两者叠加导致绑定失效：

  所有HTML原生布尔属性（autoplay、disabled、checked、readonly等）的解析规则是：只要属性出现在标签上，无论赋值什么内容，浏览器都会将其判定为真值，属性值会被归一化为空字符串或固定的属性名本身，不会保留你填写的自定义表达式。

• 你在组件标签上写autoplay="autoplay"时，浏览器和AngularJS的内置逻辑处理后，该属性的实际值已经不是你预期的父作用域变量名autoplay，AngularJS用处理后的值去父作用域匹配变量时失败，最终拿到的就是undefined。
• 改为自定义属性名atp后，该名称不属于原生HTML属性范围，浏览器和AngularJS都不会对它做额外处理，属性值会完整保留为你填写的表达式，自然就能正常匹配到父作用域的autoplay变量，拿到正确的值。

验证方式 #

你可以在指令的link函数中打印原生属性集合，确认属性值的实际情况：

link: function (scope, element, attributes) {
  console.log(attributes.autoplay) // 输出结果不会是你预期的"autoplay"字符串
}

避坑建议 #

自定义指令的绑定属性名尽量避开HTML原生属性名称，或者给自定义属性加统一的业务前缀，避免和原生逻辑、框架内置逻辑产生冲突。

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