Comportement étrange de la case à cocher AngularJS

Question

quelques amis et moi travaillons sur un projet.C'est le deuxième projet dans lequel je travaille avec AngularJS, j'utilise actuellement la version 1.2.3.

Malgré cela, je trouve parfois certains de ses comportements étranges et je ne comprends pas pourquoi quelque chose se produit.

La situation est donc la suivante...J'ai dans mon fichier cshtml le message suivant :

<div class="checkbox">
    <label>
         <input name="somecheckbox" type="checkbox" ng-click="click()" ng-model="displayRegardlessOfSomething" />
         <label>Display regardless of something</label>
    </label>
</div>

<h1>{{displayRegardlessOfSomething}}</h1>

Dans mon fichier javascript, j'ai le code suivant dans une directive :

Au tout début:

$scope.displayRegardlessOfSomething = true;

Et j'ai ce qui suit :

$scope.click = function () {
    console.log($scope.displayRegardlessOfSomething)
}

Et chaque fois que je coche ou décoche la case, j'obtiens toujours vrai...Cependant, la particularité est que le contenu à l'intérieur du <h1></h1> changements de balises....Donc, c'est comme si je changeais la valeur d'une variable sur la couche HTML, mais pas sur la couche JavaScript...

Pourquoi cela arrive-t-il?

J'ai résolu le problème en utilisant $parent.displayRegardlessOfSomething mais je ne comprends pas pourquoi cela a résolu le problème...quelle est la cause du problème en premier lieu ?

Answer 1

J'ai essayé ce que tu as fait au violon et ça marche bien pour moi.

http://jsfiddle.net/nicolasmoise/X9KYU/1/

Le fait que cela fonctionne pour vous lorsque vous utilisez $parent me fait penser qu'un contrôleur parent est en faute ici.Peut-être avez-vous deux variables portant le même nom ?

P.S.:rappelez-vous qu'en Javascript, les primitives sont passées par valeur et les objets sont passés par référence.C'est la cause de nombreuses erreurs pour les développeurs Angular.Voir ce violon où j'illustre mon propos.

avec des primitives : http://jsfiddle.net/nicolasmoise/X9KYU/

avec des objets : http://jsfiddle.net/nicolasmoise/X9KYU/2/

Answer 2

À moins d'être sûr que tout se déroule dans le même cadre, ce qui n'est presque jamais le cas, vous devriez ayez toujours un point quelque part dans votre expression ng-model.

myApp.controller('MyController2', function($scope) {

  $scope.model = { displayRegardlessOfSomething: true };

  $scope.click = function() {
    console.log($scope.model.displayRegardlessOfSomething);
  };
});

<input type="checkbox" 
       ng-click="click()" 
       ng-model="model.displayRegardlessOfSomething" />

Voir ce plongeur pour plus de détails sur la démo en direct.