搜尋

首頁  >  問答  >  主體

angular.js - 請問ng-click="alterCheck()"和ng-click="check=true"有什麼不同?

<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_u1582phpcn_u15822784 天前630

全部回覆(2)我來回復

  • 我想大声告诉你

    我想大声告诉你2017-05-15 17:05:45

    我在這個例子裡可以重現類似你描述的問題(因為之前遇到過,所以多看了幾眼):

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

    這是一個很簡單的demo,透過ng-repeat显示一组单选框,通过点击点选按钮,在下面的checkIndex: {{ checkIndex }}中显示选中的单选框的$index。線上demo看這裡:jsfiddle

    如果運行目前的程式碼,會發現,{{ checkIndex }}壓根沒有變化,無論你怎麼使勁點,戳破滑鼠也沒用

    但如果template換成我註解掉的那部分程式碼,改用changeCheckIndex方法,template换成我注释掉的那部分代码,改用changeCheckIndex方法,{{ checkIndex }}就改變了。

    那麼問題來了,如何造成這個局面的?我們還是要回到文檔去(最近發現ng的文檔還是不錯的):

    我認為原因在於checkIndex = $index的写法,使得checkIndex是一个在每个template instance中独立$scope下的变量,并不是我们在Controller裡定義的那個。

    文檔地址: ngRepeat

    回覆
    0
  • PHP中文网

    PHP中文网2017-05-15 17:05:45

    值的複製和物件的引用的差別,這個問題不好回答啊,重現不了錯誤,只能大概覺得。

    回覆
    0
  • 取消回覆