ng-repeat 不更新模型答案

【问题标题】：ng-repeat isnt updating modelng-repeat 不更新模型
【发布时间】：2018-03-07 22:35:36
【问题描述】：

我正在创建一个 nassi-shneidermann-diagram 编辑器。要在 HTML 中显示图表，我使用嵌套的 ng-repeat

<!-- ngRepeat: list in item.container -->
<!-- ngInclude: '/app/ui/templates/strukto/list.xht' -->
<div class="container ng-scope" ng-repeat="list in item.container" ng-include="'/app/ui/templates/strukto/list.xht'">
    <ul class="strukto-element ng-scope" dnd-list="list" ng-class="{ empty: list.length == 0 }">
        <!-- ngRepeat: item in list -->
        <!-- ngInclude: '/app/ui/templates/strukto/' + item.type + '.xht' -->
        <li ng-repeat="item in list" ng-include="'/app/ui/templates/strukto/' + item.type + '.xht'">
            <div class="strukto-element anweisung">
                <text class="name ng-binding" data-strukto-editable="true" ng-bind-html="escapeMultiLine(item.text)">Ausgabe Test</text>
            </div>
        </li>
        <!-- end ngRepeat: item in list -->
        <!-- ngInclude: '/app/ui/templates/strukto/' + item.type + '.xht' -->
        <li ng-repeat="item in list" ng-include="'/app/ui/templates/strukto/' + item.type + '.xht'">
            <div class="strukto-element block">
                <div class="section head">
                    <div></div>
                    <text class="name ng-binding" data-strukto-editable="true" ng-bind-html="escapeMultiLine(item.text)">Block</text>
                </div>
                <div class="section body">
                    <div></div>
                    <!-- ngRepeat: list in item.container -->
                    <!-- ngInclude: '/app/ui/templates/strukto/list.xht' -->
                    <div class="container ng-scope" ng-repeat="list in item.container" ng-include="'/app/ui/templates/strukto/list.xht'">
                        <ul class="strukto-element ng-scope" dnd-list="list" ng-class="{ empty: list.length == 0 }">
                            <!-- ngRepeat: item in list -->
                            <!-- ngInclude: '/app/ui/templates/strukto/' + item.type + '.xht' -->
                            <li ng-repeat="item in list" ng-include="'/app/ui/templates/strukto/' + item.type + '.xht'">
                                <div class="strukto-element anweisung">
                                    <text class="name ng-binding" data-strukto-editable="true" ng-bind-html="escapeMultiLine(item.text)">Anweisung</text>
                                </div>
                            </li>
                            <!-- end ngRepeat: item in list -->
                        </ul>
                    </div>
                    <!-- end ngRepeat: list in item.container -->
                </div>
            </div>
        </li>
        <!-- end ngRepeat: item in list -->
    </ul>
</div>

问题是：这是它在Controller中的初始化方式

$scope.models = {
  editor: [
    { /* Root */
      type: "root" , text: "",
      container: [[ /* Container */
        { type: "anweisung",  text: "Ausgabe Test", }, /* Anweisung:A */
      ]],
    },
  ],
}

这也有效

/** default.json laden, dannach das Datenmodell abändern */
$http.get('/data/default.json').then(function(res) {
  $scope.models.editor = res.data
  $rootScope.$emit("EditorModelChanged", { model: res.data })
})

但是如果我再添加一个按钮来清除数组，它不会更新

<button ng-click="models.editor = []">CLEAR</button>

我也尝试过使用内部函数，但它没有更新 ng-refresh

  $scope.$on("EditorModelApplyLocal",function(event, data) {
    $timeout(function() {
      //$rootScope.$apply(function() {
      $scope.models.editor.pop() 
      $scope.models.editor = [[ data.model ]]
      $scope.$apply()
      $('.strukto.editor').trigger("create");
      //})
    })

还有一个

 元素以 JSON 的形式保存模型
并且这更新了它应该如何。所以问题是 ng-refresh
如果我将它放在 $http.get 中的 $timeout 中，它会更新 ng-refresh

/** default.json laden, dannach das Datenmodell abändern */
    $http.get('/data/default.json').then(function(res) {
      $scope.models.editor = res.data
      $rootScope.$emit("EditorModelChanged", { model: res.data })
      $timeout(function() {
        $scope.models.editor.pop()
        $scope.$apply()
        $('.strukto.editor').trigger("create");
        //})
        if (debugTerm) debugTerm.printDebug($scope.namespace,"End Single Test removing")
      },4000)
    })


如果您想自己测试：只需访问https://strukto5.cf/#/editor

问题是：
有什么办法可以解决这个问题吗？

【问题讨论】：

一些带有实际工作示例的 jsfiddle 会很棒。我看不到您在模板中实际使用 $scope.models 变量的位置。你有一个非常奇怪的数据流。我建议不要在 ng-repeats 上使用 ng-includes，也不要在 ng-includes 标签内使用自定义 html。也许将一些逻辑提取到单独的组件/指令中是有意义的

标签： angularjs angularjs-ng-repeat

【解决方案1】：

您的问题特别难以阅读以了解错误在哪里，但我怀疑您的问题是每个 ng-repeat 都有自己的范围。

举一个孤立的例子：

<div init="foo = 1">
    <h1>{{foo}}</h1>
    <div ng-repeat="bar in barCollection">
        <button ng-click="foo = bar">set foo = bar</button>
    </div>
</div>

单击按钮时，h1 仍会显示 1。

您至少需要将按钮替换为：

        <button ng-click="$parent.foo = bar">set foo = bar</button>

虽然有比这更好的数据处理方法 - 但您需要选择适合您的解决方案的方法。

【讨论】：