Javascript Girl
  1. Javascript Girl
  3. AngularJS ngModel ne fonctionne pas dans un tabset ui-bootstrap
Intereting Posts
Déplacer des rectangles pour former un cube en utilisant trois.js Comment fonctionne jQuery.expr et où est-il documenté pour jQuery1.8.x et plus tard? La fonction ne fonctionne pas après l'ajout d'un nouvel élément Meteor et le répertoire privé JavaScript: Écoutez le changement d'attribut? Dans Javascript, comment savoir quel script hôte a été chargé? Ajax Binary Response Puis-je utiliser jQuery avec Node.js? Cacher la légende dans Google Chart Changer l'API de détection Architecture sous-jacente en angulaire Créer un triangle équilatéral au milieu de la toile? Chargement du fichier .txt dans textarea Javascript? L'exécution javascript s'arrête lorsqu'une ligne invalide est rencontrée? Utilisation d'un fichier de configuration pour JSHint avec Rhino Suppression d'un argument d'arguments en JavaScript

AngularJS ngModel ne fonctionne pas dans un tabset ui-bootstrap

Le code suivant illustre le problème: 

<!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 ici:

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

Cela crée deux boîtes de texte, une dans le jeu de tabulation et une en dehors. Ils sont tous deux liés à la variable de portée de la value . La mise à jour du contenu de la zone de texte dans le jeu de tabulation ne met pas à jour la variable de value dans la portée. La mise à jour de la zone de texte en dehors du jeu de tabulation est effectuée. Les modifications apportées à l'une des updateValueInScope() de updateValueInScope() entraîneront un appel à updateValueInScope() via ngChange.

Quelqu'un peut-il m'expliquer pourquoi cela se comporte ainsi? Existe-t-il un moyen de "réparer" le comportement afin que la zone de texte à l'intérieur du tabset modifie le modèle dans la portée?

Presque certainement, la question est que vous essayez de vous lier à un primitif (dans ce cas un flotteur). Quelque chose comme ça devrait le réparer. 

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

Fondamentalement en angulaire, si vous liez à une primitive, la valeur de la variable est passée autour, et non la référence à celle-ci, qui peut casser la liaison bidirectionnelle. Je suppose que la directive tabset crée sa propre portée, de sorte que la variable valueInScope définie dans le contrôleur perd sa liaison dans la portée enfant du tabset car c'est une primitive. Quoi qu'il en soit, ne se lient pas aux primitives et ça devrait fonctionner.

Voici une version fixe de plunk