使用 ng-repeat 的指令双向绑定未绑定回模型答案

【问题标题】：Directive Two Way Binding with ng-repeat is not binding back to the model使用 ng-repeat 的指令双向绑定未绑定回模型
【发布时间】：2019-05-30 17:57:13
【问题描述】：

在下面的代码中，我将数组数据$scope.data.arraydata 绑定到自定义部分mysection。

并且，对于每个数组数据，我将文本框与该数组的一些键绑定。

例如变量1，变量2

同样在添加多个部分时，上述工作正常。

但是当我尝试使用以下内容获取范围数据时，$scope.data 内的 arraydata 不会与值 var1 和 var2 绑定回来

angular.element(document.getElementById('form')).scope().data

例如预期输出（添加 2 个部分）

{
   "test":"Single Data",
   "arraydata":[
      [
         {
            "var1":"aaa",
            "var2":"bbb"
         }
      ],
      [
         {
            "var1":"ccc",
            "var2":"ddd"
         }
      ]
   ]
}

var app = angular.module('myApp', []);

        app.controller('myCtrl', function ($scope) {

            $scope.data = {

                "test": "Single Data",
                "arraydata": []
            }

            $scope.addSection = function () {

                $scope.data.arraydata.push([]);

            }

            $scope.addSection();
        });

        app.directive('mysection', function () {

            return {
                restrict: 'E',
                scope: {
                    arrdata: "=?"
                },
                template: $("#SectionTemplate").html()
            }

        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body id="form" ng-app="myApp" ng-controller="myCtrl">

    <div>
        {{data}}
    </div>
    <div>
        {{ arrdata }}
    </div>
    <div>
        <mysection ng-repeat="arrdata in data.arraydata" ng-model="arrdata"></mysection>
    </div>

    <button type="button" ng-click="addSection()">Add Section</button>
</body>

    <script type="text/ng-template" id="SectionTemplate">
        <div style="border: solid 1px red">
            {{ arrdata }}
            <input type="text" ng-model="arrdata.var1" />
            <input type="text" ng-model="arrdata.var2" />
        </div>
    </script>

【问题讨论】：

标签： jquery angularjs

【解决方案1】：

我想我在代码中看到了两件事：

NgModel 在这里不相关。相反，该指令需要 arrdata 输入绑定属性。
push 方法正在插入一个数组，并且指令需要一个对象。

例子：

var app = angular.module('myApp', []);

        app.controller('myCtrl', function ($scope) {

            $scope.data = {

                "test": "Single Data",
                "arraydata": []
            }

            $scope.addSection = function () {

                $scope.data.arraydata.push({});

            }

            $scope.addSection();
        });

        app.directive('mysection', function () {

            return {
                restrict: 'E',
                scope: {
                    arrdata: "=?"
                },
                template: $("#SectionTemplate").html()
            }

        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body id="form" ng-app="myApp" ng-controller="myCtrl">

    <div>
        {{data}}
    </div>
    <div>
        {{ arrdata }}
    </div>
    <div>
        <mysection ng-repeat="arrdata in data.arraydata" arrdata="arrdata"></mysection>
    </div>

    <button type="button" ng-click="addSection()">Add Section</button>
</body>

    <script type="text/ng-template" id="SectionTemplate">
        <div style="border: solid 1px red">
            {{ arrdata }}
            <input type="text" ng-model="arrdata.var1" />
            <input type="text" ng-model="arrdata.var2" />
        </div>
    </script>

【讨论】：