Question

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

而且，对于每个arraydata，我都将文本框与该数组的一些键绑定在一起。

例如var1，var2

在添加多个部分时，上面的方法也可以正常工作。

但是当我尝试通过以下方法获取范围数据时，arraydata中的$scope.data并没有绑定值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>

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

带有ng-repeat的指令双向绑定不会绑定回模型

1 个答案: