下面的代码说明了这个问题：
<!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 http://plnkr.co/edit/dJc009csXVHc7PLSyCf4?p=preview
这将创建两个文本框，一个位于选项卡集内，一个位于选项卡集外部。他们都受到约束value范围变量。更新选项卡集中文本框的内容不会更新value范围内的变量。更新选项卡集外部的文本框即可。对任一文本框的更改将导致调用updateValueInScope()通过 ngChange.
有人可以向我解释为什么会这样吗？是否有某种方法可以“修复”行为，以便选项卡集中的文本框将修改范围内的模型？
几乎可以肯定，问题在于您正在尝试绑定到原语（在本例中为浮点数）。像这样的事情应该解决它。
$scope.data = {}
$scope.updateValueInScope = function () {
$scope.data.valueInScope = $scope.data.value;
$scope.changes++;
}
基本上在角度中，如果绑定到一个基元，则传递变量的值，而不是对其的引用，这可能会破坏双向绑定。我猜tabset指令创建自己的作用域，因此valueInScope控制器中定义的变量失去其在子作用域中的绑定tabset因为它是一个原始的。无论如何，不要绑定到原语，它应该可以工作。
这里有一个plunk 的固定版本 http://plnkr.co/edit/toaHYASwbP9iWFvDXGmu?p=preview
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
