AngularJS ngModel在ui-bootstrap tabset中不起作用 [英] AngularJS ngModel doesn't work inside a ui-bootstrap tabset
问题描述
以下代码说明了问题：
<!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>
此处的Plunker：
Plunker here:
http://plnkr.co/edit/dJc009csXVHc7PLSyCf4?p=preview
这会创建两个文本框，一个位于tabset内，另一个位于外部。它们都绑定到值范围变量。更新标签集内文本框的内容不会更新范围中的值变量。更新tabset外的文本框。对任一文本框的更改将导致通过ngChange调用 updateValueInScope（）。
This creates two textboxes, one inside the tabset, and one outside. They are both bound to the value scope variable. Updating the contents of the textbox inside the tabset does not update the value variable in the scope. Updating the textbox outside the tabset does. Changes to either of the textboxes will result in a call to updateValueInScope() via ngChange.
有人可以向我为什么这样做？有没有办法修复行为，以便tabset中的文本框将修改范围内的模型？
Can someone explain to me why this behaves this way? Is there some way to "fix" the behavior so that the textbox inside the tabset will modify the model in the scope?
推荐答案
几乎可以肯定的是，你正试图绑定到一个原语（在这种情况下是一个浮点数）。这样的东西应该修复它。
Almost certainly the issue is that you are trying to bind to a primitive (in this case a float). Something like this should fix it.
$scope.data = {}
$scope.updateValueInScope = function () {
$scope.data.valueInScope = $scope.data.value;
$scope.changes++;
}
基本上是角度，如果你绑定一个基元，变量的值是传递，而不是对它的引用，这可以打破双向绑定。我猜测 tabset 指令创建了自己的作用域，因此控制器中定义的 valueInScope 变量失去了它的绑定在 tabset 的子范围内，因为它是一个原语。无论如何，不要绑定到原语，它应该工作。
Basically in angular, if you bind to a primitive the value of the variable is passed around, and not the reference to it, which can break 2-way binding. I'm guessing that the tabset directive creates its own scope, so the valueInScope variable defined in the controller loses its binding in the child scope of the tabset because its a primitive. Anyway, don't bind to primitives and it should work.
这是 plunk的固定版本
这篇关于AngularJS ngModel在ui-bootstrap tabset中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
