java - Angularjs UI Bootstrap Popover 阻止输入提交

标签 java javascript angularjs angular-ui-bootstrap

我通过以下方式使用了 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>

问题是由于 popover="Locate number here"popover-trigger="focus" 代码导致的,当我在提交表单后检查时,输入 testNo 的值未传递给 Controller ​​。

Controller 如下,

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

如果我从此输入中删除弹出窗口代码,它就可以正常工作。我想知道是否有特定的方法在输入中使用弹出框。

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

最佳答案

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

这是popover FAQ关于这个问题。

我在自己的自定义指令内部遇到了这个问题,但幸运的是解决方案也很简单:不要引用 $scope.var,而是引用 $scope.parent.var。简单的解决方案,但需要数小时的调试!

关于java - Angularjs UI Bootstrap Popover 阻止输入提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25422528/

相关文章:

java - "Unfortunately MyApp has stopped"当我按下一个按钮

java - SWT - 创建一个数字网格,我希望能够使用键盘进行切换

java - 在一组 4 个数字中查找出现次数最多的数字的最有效算法

javascript - Browserify with typescript modules - 什么是最佳设计实践?

html - Angular - ng 类在 td 上工作但不在 tr 上工作

java - 线程-使用标志解锁锁,然后尝试/最终

javascript - 在 Angular6 中刷新页面时,用户名将为空

javascript - 在 VueJS 中从父组件中引用子组件的索引

angularjs - 引用本地 angular.js 不起作用

javascript - 具有多个新实例的 AngularJS 工厂类