angular.js - Apakah perbezaan antara ng-click="alterCheck()" dan 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;
  }
})

Dalam projek sebenar, menggunakan ng-click="check=true" akan menyebabkan p dipaparkan selepas mengklik, tetapi ng-click="alterCheck()" tidak akan menyebabkannya?
Kod di atas tidak boleh menghasilkan semula fenomena yang saya nyatakan. Adakah terdapat sebarang sebab tambahan yang mungkin menyebabkan ini?

Answer 1

Saya boleh menghasilkan semula masalah yang serupa dengan perkara yang anda nyatakan dalam contoh ini (kerana saya pernah menemuinya sebelum ini, jadi saya melihatnya beberapa kali lagi):

<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
    }];
});

Ini ialah demo yang sangat mudah untuk memaparkan sekumpulan kotak butang radio melalui ng-repeat Dengan mengklik butang klik, kotak butang radio yang dipilih checkIndex: {{ checkIndex }} akan dipaparkan dalam $index di bawah. Lihat demo dalam talian di sini: jsfiddle

Jika anda menjalankan kod semasa, anda akan mendapati bahawa {{ checkIndex }} tiada perubahan sama sekali Tidak kira betapa keras anda menekan, ia akan menjadi sia-sia untuk mencucuk tetikus

Tetapi jika template digantikan dengan bahagian kod yang saya ulas dan menggunakan kaedah changeCheckIndex, {{ checkIndex }} akan berubah.

Maka persoalannya, bagaimana keadaan ini berlaku? Kita masih perlu kembali kepada dokumentasi (baru-baru ini saya mendapati bahawa dokumentasi ng cukup bagus):

Saya rasa sebabnya ialah cara checkIndex = $index ditulis menjadikan checkIndex pembolehubah di bawah bebas $scope dalam setiap contoh templat, bukan yang kami takrifkan dalam Controller.

Alamat dokumen: ngRepeat

Answer 2

Perbezaan antara penyalinan nilai dan rujukan objek sukar dijawab. Saya tidak dapat menghasilkan semula ralat, jadi saya hanya boleh memberikan idea kasar.