AngularJS ngModel 在 ui-bootstrap 选项卡集中不起作用
Posted
技术标签:
【中文标题】AngularJS ngModel 在 ui-bootstrap 选项卡集中不起作用【英文标题】：AngularJS ngModel doesn't work inside a ui-bootstrap tabset 【发布时间】：2015-02-15 06:51:04 【问题描述】：以下代码说明了问题：
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.3.6/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script>
angular.module('plunker', ['ui.bootstrap'])
.controller('MainCtrl', function($scope)
$scope.changes = 0;
$scope.updateValueInScope = function ()
$scope.valueInScope = $scope.value;
$scope.changes++;
);
</script>
</head>
<body ng-controller="MainCtrl">
<tabset>
<tab heading="Tab A">
<div class="panel">
<input type="text" ng-model="value" ng-change="updateValueInScope()" />
<br />
<tt>value: value</tt><br />
<tt>valueInScope: valueInScope</tt><br />
<tt>changes: changes</tt>
</div>
</tab>
</tabset>
<input type="text" ng-model="value" ng-change="updateValueInScope()" />
<br />
<tt>value: value</tt><br />
<tt>valueInScope: valueInScope</tt><br />
<tt>changes: changes</tt>
</body>
</html>
在这里打个招呼：
http://plnkr.co/edit/dJc009csXVHc7PLSyCf4?p=preview
这将创建两个文本框，一个在标签集内，一个在标签集外。它们都绑定到value 范围变量。更新选项卡集中文本框的内容不会更新范围内的value 变量。更新标签集外的文本框。对任一文本框的更改将导致通过 ngChange 调用 updateValueInScope()。
有人可以向我解释为什么会这样吗？是否有某种方法可以“修复”该行为，以便选项卡集中的文本框将修改范围内的模型？
【问题讨论】：
没有 angualar-ui 注入也能正常工作。也许是 angular-ui 中的错误？ 我同意。没有angular-ui它工作正常，因此我很困惑。此外，它非常接近 ngModel 文档中给出的示例：link。即便如此，reptilicus 的回答为我解决了这个问题，所以我将其标记为已接受的答案。 【参考方案1】：几乎可以肯定，问题在于您正在尝试绑定到一个基元（在本例中为浮点数）。像这样的东西应该可以解决它。
$scope.data =
$scope.updateValueInScope = function ()
$scope.data.valueInScope = $scope.data.value;
$scope.changes++;
基本上在 Angular 中，如果您绑定到原始变量的值，则传递变量的值，而不是对它的引用，这可能会破坏 2-way 绑定。我猜tabset 指令创建了自己的作用域，因此控制器中定义的valueInScope 变量失去了在tabset 的子作用域中的绑定，因为它是一个原语。无论如何，不要绑定到原语，它应该可以工作。
这是fixed version of plunk
【讨论】：
我不明白为什么，但你是对的。这解决了问题。谢谢。 感谢您的补充说明。这有帮助。 太好了，这就是问题所在。基元打破了隔离范围的 2 路数据绑定，因此我们最好使用一个对象来防止这种情况发生，非常感谢@reptilecus。以上是关于AngularJS ngModel 在 ui-bootstrap 选项卡集中不起作用的主要内容，如果未能解决你的问题，请参考以下文章