AngularJS：$ scope在函数后没有更新答案

【问题标题】：AngularJS: $scope is not updated after functionAngularJS：$ scope在函数后没有更新
【发布时间】：2015-03-26 16:17:34
【问题描述】：

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

$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，现在它已更新。

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

这是什么意思？

【问题讨论】：

向我们展示更多代码。也许你的作用域层次有问题。
你能告诉我 plunker 的结果吗？
你能在 plunkr 中添加这段代码吗？
带有ng-click 属性的按钮（或div）应该在控制器内部而不是外部
只是为了让 Chtiwi Malek cmets 清楚，在您之前的配置中，控制器的范围是 span 元素。因此，所有函数和变量都在该特定范围和任何子范围中声明。因此，将 div 放在 span 元素之外，div 无法访问您创建的范围。

标签： javascript angularjs angularjs-scope

【解决方案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

【讨论】：

我试过了，控制台输出数字正确，但是span没有更新。
您使用的是哪个版本的 AngularJS？你用这个例子试过 Plunker 吗？那个对我有用，因此代码应该可以正常工作，除非您的代码中存在其他一些周围的问题。例如，您能否在 Plunker 中提供您的完整代码？
最新版本 1.3.15
嘿@CodeBreakers 在哪里可以找到没有$scope 的语法文档？

【解决方案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
}

【讨论】：

我做过类似的事情，而且效果很好。为什么会这样？
您不能将 ng 控制器放在 span 标签内并在外部调用函数，您需要告诉部分 html 何时在 wich 控制器内
{{someNumber}}
添加+1！

{{someNumber}}
添加+1！
我已将 ng-controller 移动到具有相同结果的父元素。
酷，我的不是。我的带有 ng-click 的 html 位于其他 html 元素中。

【解决方案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 代码都应该在控制器内部使用。只需复制并粘贴我的代码

【讨论】：

它在我的控制器内，证明如果我点击 div 我会在控制台上得到正确的数字。

【解决方案4】：

我不确定问题出在哪里，但我通过将 ng-controller 指令移动到包含我要显示数字的 span 和 div 的父 html 元素来解决它ng-click 指令。

【讨论】：

有人明确表示要将控制器移动到父元素？就像我说的那样，我是 Angular 的新手，我不知道术语。我不明白他们对范围的含义。
我明白这一点。然而，人们告诉您的是，您需要在该控制器的范围内拥有特定于控制器的代码 (addNumber)。在 html 术语中，“作为共同父母的孩子”，而不是作为兄弟姐妹。通过在问题中发布所有相关代码来帮助自己。也就是说，还要接受 CodeBreakers 关于不使用 $scope 的建议。它将在未来的版本中被弃用。

【解决方案5】：

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

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

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

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

希望有帮助！

【讨论】：