Question

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

<!-- 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");
      //})
    })

还有一个＆lt;前＆gt;以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

问题是：有没有办法解决这个问题？

Answer 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>

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

ng-repeat不是更新模型

1 个答案: