绑定仅在单击元素后更新，但控制器中的字符串已更新 (Angular 1.5)

Question

我有一个 ng-class 属性（不是我自己写的）。它绑定到控制器中的字符串变量。看起来像：<some-tag ng-class="'indicator_' + $ctrl.stringValue"></some-tag>.

当 window 首次加载时 - 它包含正确的数据，但在控制器中更新字符串后 - class 属性中的值仅在我单击该元素后更新（单击将打开一个列表，但我认为它不相关）。

我读到在这些情况下首先要检查的是代码被 $scope.$apply 包围。是的，因为当我尝试添加它时 - 我收到一条错误消息“$digest already in progress”。在寻找 $ctrl 和 ng-class 信息时，我阅读了 AngularJS component doc and this site，它为我提供了关于这些主题的一些基本背景。

问题是，我找不到 ng-class 和 $ctrl 的任何示例。也许无关紧要，但也许不相关:)

我在主题中发现的一个无关问题的示例是：。一般来说，我发现的大多数示例都包含花括号，我认为在这种情况下不相关，因为我正在绑定一个字符串（也许我弄错了:)）。

我怀疑它可能没有正确绑定它，我只是不知道为什么。

编辑：

继续搜索该主题后，我不再确定它是否与 ng-class 有关（因此我也编辑了标题）。看起来更像是刷新问题。

我对为什么页面不刷新感到困惑，因为我到处阅读 - 他们说 Angular 应该自己调用摘要函数，我不应该干涉。

编辑2：

我正在使用 typeScript，并且 stringValue 通过来自服务的事件进行更新。但是字符串确实更新了——所以我不确定它是否是理解问题的相关信息，但值得一提:)

Answer 1

我用 Angular 1.5.7 准备了一个 plunker，其中包含您描述的演示。似乎没有任何问题，或者您应该做任何特别的事情。（我为控制器使用了不同的别名，这是最佳做法，但 $ctrl 也可以正常工作。）

https://plnkr.co/edit/wCpBQ5?p=preview

const DemoComponent = {
  controller: DemoController,
  controllerAs: 'demoCtrl',
  template: `
    <h2 ng-class="'demo_' + demoCtrl.classSuffix">{{ demoCtrl.classSuffix }}</h2>
    <button ng-click="demoCtrl.changeClass()">Change Class</button>
    `
}

angular.module('myapp', [])
  .component('demo', DemoComponent);

如果您能在 plunker 和 post 和 link 中重现该问题，将会非常有帮助。否则，我希望你在这个plunker中找到答案。

Answer 2

问题解决！！ :D

我所要做的就是在更新控制器中的字符串后添加 $timeout(0)！

解释：这是一个摘要问题，我无法使用$scope.$apply()的原因是因为我试图直接这样做。我需要做一个 safe apply，这意味着 - 首先确保该范围内没有摘要，然后运行 apply。

事实证明，一个简单的方法就是使用 $timeout(0)。

绑定仅在单击元素后更新，但控制器中的字符串已更新 (Angular 1.5)

The Binding Only Updates After Clicking the Element, Though the String in the Controller Has Already Been Updated (Angular 1.5)

data-binding

reload

page-refresh

ng-class

angularjs-1.5