AngularJS指令ngOpen可用于手风琴组件吗?

时间:2014-08-18 18:13:52

标签: javascript angularjs twitter-bootstrap angularjs-directive

AngularJS指令ngOpen除了将其与详细信息标记一起使用外,还有什么意义?

我正在尝试创建一个手风琴组件而且这个问题出现了,但不确定它是否有助于考虑我无法将其用于除细节标签以外的任何其他内容。

<body ng-app="">
    Check me check multiple: <input type="checkbox" ng-model="open"><br/>
  <details id="details" ng-open="open">
     <summary>Show/Hide me</summary>
  </details>
</body>

1 个答案:

答案 0 :(得分:0)

ngOpen指令的目的用于保留与open attribute一起使用的details element

来自docs

  

HTML规范不要求浏览器保留布尔属性的值,例如open。 (它们的存在意味着真实,它们的缺失意味着错误。)如果我们将Angular插值表达式放入这样的属性中,那么当浏览器删除属性时绑定信息将会丢失。 ngOpen指令解决了open属性的这个问题。浏览器不会删除此补充指令,因此提供了存储绑定信息的永久可靠位置。

opendetails都不是特定角度的。这是完全有效的HTML:

<details open>
    <summary>Section Header</summary>
    Section Content
</details>

Angular刚刚添加了ngOpen来帮助绑定。

注意:这是一项实验性功能,为not supported in all browsers

PS 如果您正在寻求实施手风琴崩溃功能,我建议您使用Bootstrap UI优惠两个角度指令适用于所有浏览器。