angular.js - 请问ng-click="alterCheck()"和ng-click="check=true"有什么不同?
phpcn_u1582
phpcn_u1582 2017-05-15 17:03:45
0
2
607
<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;
  }
})

在实际项目中,使用 ng-click="check=true" 的方法会造成点击后 p 处于显示的状态,而 ng-click="alterCheck()" 则不会,请问这是什么原因呢?
上述代码无法复现我所说的现象。有什么额外的原因可能造成这一现象吗?

phpcn_u1582
phpcn_u1582

membalas semua(2)
我想大声告诉你

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

Ty80

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan