javascript - 使用 popover 指令时 Angular 绑定(bind)不起作用

Question

我的 AngularJS 应用程序中的表单中有这个输入字段:

<input type="text" data-ng-model="githubRepoUrl" id="githubRepoUrl" class="form-control" placeholder=" popover="Popover text here." popover-placement="top" popover-trigger="focus" required>

popover 像 charm 一样工作，但是当提交表单时，我无法访问声明为 data-ng-model 的 githubRepoUrl 属性领域的。 AngularJS 根本没有绑定(bind)它。但是，如果我只删除 popover="Popover text here."绑定(bind)将起作用，我可以访问 Controller 中属性的值。我可以保留与弹出框相关的其余属性，绑定(bind)将起作用。

请注意，我正在使用 angular-ui-bootstrap，并且我没有声明 githubRepoUrl Angular Controller 中的属性。尽管如此，表单中的其余属性无需在 Controller 中声明即可正常访问，因为它们默认添加到作用域中。

对这里可能发生的事情有什么想法吗？感谢大家的帮助。

Answer 1

我的猜测是您使用的 popover 指令有一个独立的作用域，因此您的模型仅在指令内声明。在 ng-model 名称前加上 $parent 将在指令的父级中声明模型。示例如下:

<input type="text" data-ng-model="$parent.githubRepoUrl" id="githubRepoUrl" class="form-control" placeholder=" popover="Popover text here." popover-placement="top" popover-trigger="focus" required>