Angular 子范围值未正确绑定

Question

我正在编写一个 angular 应用程序，我需要在其中将值绑定到某个子范围。在控制器中，我有：

var addToStack = function(fallingItemOrder, scope) {
  scope.model.stageChimneys[fallingItemOrder].Stack += 1;
  return (scope.model.stageChimneys[fallingItemOrder].Stack === 3);
};

其中 scope 与 $id=2 引用 $scope（我猜它是 2，因为它位于 ng-view 指令下。）

主视图有这段代码：

<ul class="chimneysUL">
  <li ng-repeat="chimney in model.stageChimneys" ng-include="model.chimneyUrl"></li>
</ul>

然后 ng-include 获取这个子视图，它用不同的数据渲染了 5 次：

<div class="chimney" id="{{chimney.LetterCode}}" data-order="{{$parent.$index}}">
  <div class="pipeHead"></div>
  <div class="pipeBody">
    <table class="ulInsertedLetters">
      <tr ng-repeat="i in model.getNumber(model.stackSize) track by $index" ng-class="3 - $index <= chimney.Stack ? 'showInserted' : 'hideInserted'">
        <td>
          <img class="insertedLetterImg" data-ng-src="{{'../../Images/Cards/rectangle.jpg'}}" />
        </td>
      </tr>
    </table>
  </div>
  <div class="picContainer">
    <img class="card" data-ng-src="{{chimney.PicName}}" />
  </div>
</div>

所有绑定似乎都是正确的（例如 chimney.LetterCode 等..）但是当 addToStack 执行时，{{chimney.Stack}} 保持不变。

据我了解范围，如果具有 $id = 2 的父范围的模型属性发生变化，那么这些变化应该向下渗透并立即反映在 html 视图中。

确实在调试中，我可以看到深入 $$childTail --> $$prevSibling，烟囱对象的 Stack 属性增加了。

那么我忽略的缺失部分是什么？

Answer 1

受孕有问题。无论您包含的模板中有什么，都不应该尝试访问外部的内容。您应该改用指令。

我不是 100% 确定，但我认为 ng-include 创建了另一个范围。因此，在您的主视图中发生的任何修改都不会报告给您包含的模板，因为该新范围内的值未更改。

编辑：

如果您从摘要外部调用您的函数（例如在传递给第 3 方库的回调中，在 setTimeout 函数中），视图将不会更新，因为 angular 没有知道值的方式已经改变。在这种情况下，你必须用 $scope.$apply() 调用包围你的调用。

Angular 子范围值未正确绑定

Angular Child Scope value doesn't bind correctly

angularjs

angularjs-scope

angularjs-ng-repeat