Pregunta AngularJS ngModel no funciona dentro de un tabset ui-bootstrap


El siguiente código ilustra el problema:

<!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 aquí:

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

Esto crea dos cuadros de texto, uno dentro del conjunto de pestañas y otro afuera. Ambos están vinculados a la value variable de alcance La actualización de los contenidos del cuadro de texto dentro del conjunto de pestañas no actualiza el value variable en el alcance. La actualización del cuadro de texto fuera de la tabla de pestañas sí lo hace. Los cambios en cualquiera de los cuadros de texto darán como resultado una llamada a updateValueInScope() a través de ngChange.

¿Puede alguien explicarme por qué esto se comporta de esta manera? ¿Hay alguna forma de "arreglar" el comportamiento para que el cuadro de texto dentro de la pestaña modifique el modelo en el alcance?


10
2017-12-16 20:35


origen


Respuestas:


Casi con certeza, el problema es que estás intentando enlazar a un primitivo (en este caso, un flotador). Algo como esto debería arreglarlo.

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

Básicamente en angular, si se une a una primitiva, se pasa el valor de la variable, y no la referencia a ella, lo que puede romper el enlace bidireccional. Supongo que el tabset directiva crea su propio alcance, por lo que valueInScope variable definida en el controlador pierde su vinculación en el ámbito secundario del tabset porque es un primitivo. De todos modos, no se una a primitivas y debería funcionar.

Aquí hay un versión fija de plunk


17
2017-12-16 20:52