AngularJS ngModel在ui-bootstrap tabset中不起作用

Question

以下代码说明了该问题：

<!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在这里：

http://plnkr.co/edit/dJc009csXVHc7PLSyCf4?p=preview

这会创建两个文本框，一个位于tabset内，另一个位于外部。 它们都绑定到value范围变量。 更新选项卡集内文本框的内容不会更新范围中的value变量。 更新tabset外的文本框。 对updateValueInScope()本框的更改将导致通过ngChange调用updateValueInScope() 。

有人可以向我解释为什么这样做？ 有没有办法“修复”行为，以便tabset中的文本框将修改范围内的模型？

Answer 1

几乎可以肯定的是，你正试图绑定到一个原语（在这种情况下是一个浮点数）。 这样的事情应该解决它。

$scope.data = {}
$scope.updateValueInScope = function () {
  $scope.data.valueInScope = $scope.data.value;
  $scope.changes++;
}

基本上在角度，如果你绑定到一个原语，变量的值被传递，而不是对它的引用，这可以打破双向绑定。 我猜测，该tabset指令创建自己的范围，所以valueInScope在控制器中定义变量失去其在的子范围结合tabset ，因为它的原始。 无论如何，不要绑定到原语，它应该工作。

这是plunk的固定版本

AngularJS ngModel在ui-bootstrap tabset中不起作用

问题描述

1 个解决方案

解决方案1
17 已采纳 2014-12-16 20:52:48

AngularJS ngModel在ui-bootstrap tabset中不起作用

问题描述

1 个解决方案

解决方案1 17 已采纳 2014-12-16 20:52:48

解决方案1
17 已采纳 2014-12-16 20:52:48