Javascript ng模型未正确更新

我有这样一个结构（非常简化）：

我的问题是totVal在视图中不更新。当我在控制台中记录该值时，它会在控制台中正确显示，但只有当我将totVal div从视图中滚动出来并再次滚动回来时，它才会在视图中更新。看起来像是Chrome中的AngularJS bug，但我在谷歌上找不到类似的例子。它在FireFox中运行良好

如果我在ng repeat之前移动totVal，它就会工作，如果我删除ng repeat，它就会工作（我宁愿不改变html的结构，因为这将需要大量工作，并且会使设计变得更糟）。我还尝试将totVal移动到根范围，但没有成功

只有绘制/渲染失败，Batarang和console.log总是给我更新的值

---

以前有人遇到过这个问题吗？

我不确定这是否是罪魁祸首，但您绝对不应该为此使用

$rootScope

正如文件所述：

$rootScope存在，但可用于邪恶

请看这里：

---

如果没有必要，我会在没有它的情况下重写您的代码：

<div ng-controller="MainCtrl">
  <div>Views and other stuff</div>
  <div ng-controller="MyCtrl">
  <!-- You also had an $root.items that didn't match any element here -->
    <div ng-repeat="item in items track by $index">
      {{item.id}}
    </div>
    <div>
      Total value: {{totVal}}
    </div>
  </div>
</div>

编辑：
此外，每次实例化控制器时，您都会设置

$rootScope.totalVal=0

，并最终重置它。

---

也许这就是你没有看到更新的原因？

我不知道这是否正是你想要的，因为我不知道你的用例。 但是，我实现了一个工作示例，请参见此处

我对您的代码进行了一些重构，删除了额外的控制器，并将

totVal

封装到服务中。此外，我还使用了

controllerAs

语法使一切都更清晰

代码的问题在于

totVal

是一个原语。因此，当您为其指定新值时，angular将无法更新引用。这就是为什么您的模型中应该始终有一个点

看看我的代码，你会发现我声明了

totVal

为

var-totVal={val:0}

。我只需更新

val

，即可保留引用并正确更新视图

.service('totVal', function(){
  var totVal = {val:0};

  this.computeTotVal = function(){
    //perform computations, I will just increment
    totVal.val++;
  }

  this.getTotVal = function() { return totVal; }
})

---

另见此。

问题在于角度和铬合金。如果我删除了totVal输出之前的ng repeat，它就会工作。如果我将totVal放在DOM结构的更高位置，或者在ng重复之前，它也会起作用。 我认为这与绑定的数量和DOM的复杂性有关，许多嵌套DIV以某种方式破坏了绑定。我还注意到，如果我有许多嵌套的引导类，如“row”和“col-xs-12”，它也会破坏绑定。因此，它似乎与浏览器渲染/绘制视图有关（因为将totVal滚出并滚回视图更新了该值）

我从中学到的主要内容是使用更智能的指令，并尝试简化DOM结构，特别是在使用引导的情况下

原件：

<div ng-controller="MainCtrl">
  <div>Views and other stuff</div>
  <div ng-controller="MyCtrl">
    <div ng-repeat="item in $root.items track by $index">
      {{item.id}}
    </div>
    <div>
      Total value: {{totVal}}
    </div>
  </div>
</div>

观点和其他东西
{{item.id}
总值：{{totVal}}

使其正常工作的不同更改：

<div ng-controller="MainCtrl">
  <div>Views and other stuff</div>
  <div ng-controller="MyCtrl">
    <div>
      Total value: {{totVal}}
    </div>
  </div>
</div>

<div ng-controller="MainCtrl">
  <div>Views and other stuff</div>
  <div ng-controller="MyCtrl">
    <div ng-repeat="item in $root.items track by $index">
      {{item.id}}
    </div>
  </div>
  <div>
    Total value: {{totVal}}
  </div>
</div>

<div ng-controller="MainCtrl">
  <div>Views and other stuff</div>
  <div ng-controller="MyCtrl">
    <div>
      Total value: {{totVal}}
    </div>
    <div ng-repeat="item in $root.items track by $index">
      {{item.id}}
    </div>
  </div>
</div>

观点和其他东西
总值：{{totVal}}
观点和其他东西
{{item.id}
总值：{{totVal}}
观点和其他东西
总值：{{totVal}}
{{item.id}

totVal

在每次调用

updateTotVal

时都设置为0。我想这就是为什么你总是看到0。除非变量声明和控制台之间缺少一些代码。log“//calculations”是缺少的代码…链接给出了一些很好的答案，这使我的应用程序的结构更好。但是渲染的问题仍然存在。我发现，如果我将要渲染的值放在块元素中，它不会更新，直到它从视图中滚出来并再次滚回来（仅适用于Chrome）。但是如果我把这个值放在一个跨度或一个浮动的元素中，它就会起作用。Chrome和Angular必须存在范围/渲染问题…请花时间查看答案并选择正确的答案（或添加解决方案，如果不同）。但是如果控制器都在控制器范围内，如何在控制器之间共享函数和变量？我希望能够从多个控制器访问UpdateToVal。您通常使用可注入的，例如

服务

，当您注入它时，作为一个单例将提供一个一致的值。好的，我想我知道我应该做什么（以及应该如何做）。我会试试这个，但这需要一些时间，因为这是一个需要编辑的大项目：当我知道它在这个特殊情况下是否有帮助时，s将在这里发帖。谢谢你的例子：）很高兴它帮助了你。如果您不喜欢指定对象而不是原语（我个人不喜欢），则更精细的解决方案是在控制器中指定

this.totVal=totVal

，并在视图中调用

totVal.getTotVal（）

。如果你想更好地理解我说的话，我更新了codepen示例。好的，我现在已经测试了其中一些东西。如何修复此示例？我无法获取重置或与ng模型交互并选择的值。让我看看。好的，我更正了它。要使下拉列表正常运行，必须使用

ng选项

。

.service('totVal', function(){
  var totVal = {val:0};

  this.computeTotVal = function(){
    //perform computations, I will just increment
    totVal.val++;
  }

  this.getTotVal = function() { return totVal; }
})

<div ng-controller="MainCtrl">
  <div>Views and other stuff</div>
  <div ng-controller="MyCtrl">
    <div ng-repeat="item in $root.items track by $index">
      {{item.id}}
    </div>
    <div>
      Total value: {{totVal}}
    </div>
  </div>
</div>

<div ng-controller="MainCtrl">
  <div>Views and other stuff</div>
  <div ng-controller="MyCtrl">
    <div>
      Total value: {{totVal}}
    </div>
  </div>
</div>

<div ng-controller="MainCtrl">
  <div>Views and other stuff</div>
  <div ng-controller="MyCtrl">
    <div ng-repeat="item in $root.items track by $index">
      {{item.id}}
    </div>
  </div>
  <div>
    Total value: {{totVal}}
  </div>
</div>

<div ng-controller="MainCtrl">
  <div>Views and other stuff</div>
  <div ng-controller="MyCtrl">
    <div>
      Total value: {{totVal}}
    </div>
    <div ng-repeat="item in $root.items track by $index">
      {{item.id}}
    </div>
  </div>
</div>