angulaire.js - Quelle est la différence entre ng-click="alterCheck()" et ng-click="check=true"?

Question

<section ng-app="app" ng-controller="ctrl">
  <p ng-show="check && form.$invalid"></p>
  <form name="form" ng-submit="init()">
    <input type="text" ng-model="text" required/>
    <!--     <input type="submit" ng-click="alterCheck()"/> -->
    <input type="submit" ng-click="check=true"/>
  </form>
</section>
angular.module('app', [])
.controller('ctrl', function($scope){
  $scope.check = false;
  $scope.init2 = function() {
    $scope.text = '';
  }
  $scope.init = function() {
    $scope.init2();
    $scope.check = false;
  }
  $scope.alterCheck = function() {
    $scope.check = true;
  }
})

Dans les projets réels, l'utilisation de ng-click="check=true" entraînera l'affichage de p après avoir cliqué, mais ng-click="alterCheck()" ne le fera pas. Quelle en est la raison ?
Le code ci-dessus ne peut pas reproduire le phénomène que j'ai mentionné. Y a-t-il d'autres raisons qui pourraient provoquer cela ?

Answer 1

Je peux reproduire un problème similaire à ce que vous avez décrit dans cet exemple (car je l'ai déjà rencontré, donc je l'ai regardé encore quelques fois) :

<p ng-controller="DemoCtrl">
  <ul>
    <li ng-repeat="item in items">
      <input type="radio" name="group" ng-model="item.checked" ng-click="checkIndex = $index">{{ item.name }}
      <!-- <input type="radio" name="group" ng-model="item.checked" ng-click="changeCheckIndex($index)">{{ item.name }} -->
    </li>
  </ul>
  
  checkIndex: {{ checkIndex }}
</p>

var demo = angular.module('myApp', []);

demo.controller('DemoCtrl', function($scope, $timeout){
    $scope.checkIndex = 0;
    
    $scope.changeCheckIndex = function(index){
        $scope.checkIndex = index;
    };
    
    $scope.items = [{
        name: 'Beijing',
        checked: false
    },{
        name: 'Shanghai',
        checked: false
    },{
        name: 'Taiyuan',
        checked: false
    }];
});

Il s'agit d'une démo très simple. Affichez un groupe de boîtes de boutons radio via ng-repeat En cliquant sur le bouton de clic, la boîte de boutons radio sélectionnée checkIndex: {{ checkIndex }} sera affichée dans le $index ci-dessous. Voir la démo en ligne ici : jsfiddle

Si vous exécutez le code actuel, vous constaterez que {{ checkIndex }} il n'y a aucun changement du tout. Peu importe la force avec laquelle vous appuyez, il sera inutile de pousser la souris

.

Mais si template est remplacé par la partie de code que j'ai commentée et utilise la méthode changeCheckIndex, {{ checkIndex }} changera.

Alors la question est : comment cette situation s’est-elle produite ? Il faut encore revenir à la documentation (récemment j'ai trouvé que la documentation de ng est plutôt bonne) :

Je pense que la raison est que la façon dont checkIndex = $index est écrit fait de checkIndex une variable sous un $scope indépendant dans chaque instance de modèle, pas celle que nous avons définie dans Controller.

Adresse du document : ngRepeat

Answer 2

Il est difficile de répondre à la différence entre la copie de valeur et la référence d'objet. Je ne peux pas reproduire l'erreur, je ne peux donc donner qu'une idée approximative.