Angularjs UI Bootstrap Popover阻止输入提交

Question

我已经通过以下方式将Angularjs与ui.bootstrap popover功能结合使用，

<form name="frm1" role="form" ng-submit='myFunc()' novalidate="novalidate">
  .... other inputs go here...
<input type="number" ng-pattern="/^[0-9]+$/" name="testNo" ng-model='testNo' required popover="Locate number here" popover-trigger="focus">
<input type="submit" ng-model='funcBtn' value="Submit" ng-click="submitted = true" ng-disabled="value.length=0">
</form>

问题是由于在提交表单后检查输入testNo的值未传递到控制器时，出现了popover popover="Locate number here" popover-trigger="focus"代码。

控制器如下，

app.controller('myCtrl', ['$scope','$location','$log', function($scope,$location,$log)
{
  $log.log('testNo', $scope.testNo);
}]);

而且，如果我从此输入中删除弹出代码，它将正常工作。 我想知道是否有将弹出框用于输入的特定方法。

使用资源ui.bootstrap示例，输入触发器： http ://angular-ui.github.io/bootstrap/

Answer 1

问题在于，当前版本的AngularJS对于给定的DOM元素只能具有一个作用域，并且弹出框创建一个子作用域，然后该子作用域将被其他指令继承。 幸运的是，解决方案很简单。 只需参考$ parent。 指令中的my_var ，在您的情况下为ng-model="$parent.$model" 。

这是有关此问题的弹出式常见问题解答 。

我在自己的自定义指令的开头遇到了这个问题，但幸运的是，解决方案也很简单：与其引用$ scope.var，还不如引用$ scope.parent.var。 简单的解决方案，但需要数小时的调试！