Question

我正在重构一些代码并且有一个小问题。我将范围的计数变量传递给func并递增它但原始值未更新。这是一个示例：

angular.module('changeExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.counter = 0;
      $scope.change = function(counter) {
        counter++;
        console.log(counter);
        console.log($scope.counter);
      };
    }]);

<div ng-controller="ExampleController">
  <input type="checkbox" ng-model="confirmed" ng-change="change(counter)" id="ng-change-example1" />
  <label for="ng-change-example2">Confirmed</label><br />
</div>

plunker：http://plnkr.co/edit/f6fle98TSmINuD6CCz3Q?p=preview

您可以在控制台中看到输出。

你能给我一些解决方案吗？

Answer 1

我的代码

  <body ng-app="changeExample">
  <script>
  angular.module('changeExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      var vm = this;
      vm.counter = 0;
      vm.change = function(counter) {
        vm.counter++;
        console.log(counter);
      };
    }]);
</script>
<div ng-controller="ExampleController as e">
  {{e.counter}}
  <input type="checkbox" ng-model="confirmed" ng-change="e.change(e.counter)" id="ng-change-example1" />
  <label for="ng-change-example2">Confirmed</label><br />
</div>
</body>

Answer 2

请在更改功能中使用counter++而不是$scope.counter++。您的问题为什么原始值未更新的答案是您没有更新当前代码中的范围（$scope.counter）。

Answer 3

我认为你的问题是你正在混合变量，因为它的名字。也许更改counter变量名可以帮助您：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ngChange-directive-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>



</head>
<body ng-app="changeExample">
  <script>
  angular.module('changeExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.counter = 0;
      $scope.change = function(variable) {
        variable++;
        console.log(variable);
        console.log($scope.counter);
      };
    }]);
</script>
<div ng-controller="ExampleController">
  <input type="checkbox" ng-model="confirmed" ng-change="change(counter)" id="ng-change-example1" />
  <label for="ng-change-example2">Confirmed</label><br />
</div>
</body>
</html>

正确的方法是更新$ scope.counter值：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ngChange-directive-production</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
  

  
</head>
<body ng-app="changeExample">
  <script>
  angular.module('changeExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.counter = 0;
      $scope.change = function(counter) {
        $scope.counter++;
        console.log(counter);
        console.log($scope.counter);
      };
    }]);
</script>
<div ng-controller="ExampleController">
  <input type="checkbox" ng-model="confirmed" ng-change="change(counter)" id="ng-change-example1" />
  <label for="ng-change-example2">Confirmed</label><br />
</div>
</body>
</html>

我希望这有帮助！

Angularjs：作为函数参数传递的作用域的count变量未更新

3 个答案: