Question

我想更新控制器中的数字。所以我有一个控制器。

$scope.someNumber = 5;

$scope.addNumber = function(){
    $scope.someNumber ++;
    console.log($scope.someNumber); // This outputs 6, 7, 8, etc
}

然后我会显示该号码，当我刷新页面时它会起作用。

<span ng-controller="myController">{{someNumber}}</span>

现在我想在点击某些内容时拨打addNumber()。这个div包含在使用ng-repeat重复的代码中。

<div ng-click="addNumber()">Add +1!</div>

点击有效，因为addNumber()会输出正确的新号码。但由于某些原因，span未使用新值进行更新，并始终显示5。我已拨打$scope.$apply()，但我得到了$apply already in progress error。

我是Angular的新手，我想我一定错过了一些非常明显的东西。

编辑：

我已将点击添加到范围，现在已更新。

<span ng-controller="myController" ng-click="addNumber()">{{someNumber}}</span>

这是什么意思？

Answer 1

我认为你做错了什么（但不确定，因为我没有你的所有代码）是你的控制器没有完整的HTML代码。

我在这里使用Angular 1.3控制器作为语法，这有点容易理解，而且随着Angular 2.0的发布他们宣布$ scope已经不再可用了。正如您将在我的示例中看到的，我不会在任何地方使用$ scope。

  <body ng-controller="MainCtrl as vm">
    <p>Hello {{vm.someNumber}}!</p>
    <div ng-click="vm.addNumber()">Add +1!</div>
  </body>

和javascript代码：

app.controller('MainCtrl', function() {
  var vm = this;
  vm.someNumber = 5;
  vm.addNumber = addNumber;

  function addNumber(){
    vm.someNumber++;
  }
});

See this Plunker

Answer 2

<div ng-controller="myController">
<span>{{someNumber}}</span>
<div ng-click="addNumber()">Add +1!</div>
</div>

$scope.someNumber = 5;

$scope.addNumber = function(){
    $scope.someNumber ++;
    console.log($scope.someNumber); // This outputs 6, 7, 8, etc
}

Answer 3

您的代码对我这方面有效

Js代码

 $scope.someNumber = 5;

    $scope.addNumber = function () {
        $scope.someNumber++;
        console.log($scope.someNumber); // This outputs 6, 7, 8, etc
    }

html代码

<span ng-controller="myController">{{someNumber}}
    <div ng-click="addNumber()">Add +1!</div>
    </span>

您的所有html代码都应该与控制器内部一起使用。只需复制并通过我的代码

Answer 4

我不确定问题是什么，但是我通过将ng-controller指令移动到包含我要显示数字的span的父html元素来解决它。带有div指令的ng-click。

Answer 5

看看这个我认为您已将更新功能置于控制器范围之外：

<div ng-controller="FooController">{{value}}</div>
<span ng-click="update()"></span>

您需要将更新功能放在控制器的范围内：

<div ng-controller="FooController">{{value}}
    <span ng-click="update()"></span>
</div>

希望有所帮助！

AngularJS：函数后$ scope未更新

5 个答案: