Solution à l'échec de la liaison de données Angularjs

Recommandations associées : "Tutoriel Angularjs"

Je pense que tout le monde rencontrera également les problèmes que je rencontre actuellement lors du développement d'Angularjs : Évidemment, le La page a une liaison de données bidirectionnelle et les données ont changé, mais la vue n'a pas été actualisée.

Exemple de code

<div ng-controller="testCtrl">
  <p>{{name}}</p>
  <div ng-if="show">
    <input type="text" ng-model="name">
  </div>
</div>
<script>
	function testCtrl($scope){
	    $scope.show = true;
	    $scope.name = 'xiao ming';
	}
</script>

Comme indiqué dans le code, lorsque nous modifions la valeur de l'entrée, la valeur du nom de la variable doit changer en raison de la modification des données, les modifications sont effectuées via une liaison bidirectionnelle et sont cohérentes avec la valeur de l'entrée. Cependant, aucun changement de point de vue ne se produit réellement.
La raison est que ng-if isolera la portée et créera une nouvelle portée. Par conséquent, scope.name n’est pas une valeur dans la même portée que le nom dans l’entrée, elle ne peut donc pas être modifiée.

Portée

Chaque application angulaire a une portée racine $rootScope par défaut. La portée racine est au niveau supérieur et descend de celui-ci. . Portées suspendues à tous les niveaux.

Normalement, les variables liées à ng-model dans la page sont définies dans le contrôleur correspondant. Si une variable n'est pas définie dans la portée actuelle, JavaScript recherchera via le prototype du contrôleur actuel, qui est l'héritage de la portée.

Solution

<div ng-controller=“testCtrl">
  <p>{{data.name}}</p>
  <div ng-if="show">
    <input type="text" ng-model="data.name">
  </div>
</div>
<script>
	function testCtrl($scope){
	 	$scope.show = true;
	    $scope.data = {};
	    $scope.data.name = 'xiao ming';
	}
</script>

ng-if isole en fait une portée À ce stade, testCtrl est la portée parent, ng- if est équivalent à. la portée enfant, à ce stade, la liaison de données bidirectionnelle peut être réalisée en référençant les données.

Portée dans ng-if

Dans ce cas, les données des deux sont la même référence à cet objet Les modifications des propriétés peuvent être reflétées sur des objets à deux niveaux.
La situation réelle est que non seulement le contrôleur peut créer une portée, mais des instructions telles que ng-if généreront également (implicitement) de nouvelles portées. Pour résumer, ng-if, ng-switch, ng-include et d'autres éléments pouvant créer dynamiquement une interface ont tous leur propre portée de premier niveau. Par conséquent, les références d’objet doivent être utilisées autant que possible pendant le processus de développement.

Pour plus de connaissances sur la programmation informatique, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!