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。 簡單的解決方案，但需要數小時的調試！