Javascript 如何为动态指令中的输入字段设置ngModel

我创建了一个指令

，每次单击按钮时都会动态添加该指令。指令中有输入字段，我希望将其作为属性附加到html控制器（

CertObj

）中的对象，以及html输入字段中的其他属性（我指的是指令外部的部分）

在使用指令的html中，我使用了

ng repeat

和一个只有递增值的数组。单击按钮时，我将一个值推入数组，以便在

ng repeat

中添加新指令

certObj

是html控制器中的一个对象。我想将所有动态添加的指令的输入字段的值附加到对象。我在

certObj

中有一个数组

student:[]

，以及其他属性。我使用这个数组

student

来存储指令

student:[{inputdatafromtirection}，{inputdatafromtirection}]

中的对象

但是

student

数组只有一个对象（属于最后一个指令）。每个指令都应该将其输入字段值推送到

student

certObj对象的数组中。但是

certObj

只有一个

{datafromlastdirection}

将

与

ng repeat一起使用的html：

<div class="certFull" id="">

   <stu-directive ng-transclude ng-repeat="direc in direcCountArray" obj=certObj.student[direc] >
   <!--<span>{{direc}}</span>-->

   <div class="col-md-6">
      <span class="glyphicon glyphicon-plus-sign plus" ng-click="addDirective()"></span>
   </div>
   <div class="col-md-6">
      Add another student
   </div>
</div>

该指令：

    uiRouteApp.directive('stuDirective', function () {
    return {
        restrict: 'E',
        scope: {
            certObj: '=obj' //certObj to access the student array
        },
        transclude: true,
        templateUrl: 'htmlFiles/stuDirective.html',
        controller: ['$scope', '$timeout', function ($scope, $timeout) {

            $scope.$watch("certObj.student[direc].studentMark", function (newval, oldval) {
              $scope.certObj.student.push({"studentMark":newval, "studentName" :$scope.studentName});

            })
            $scope.$watch("certObj.student.studentName", function (newval, oldval) {

            })
        }],
     }
})

控制员：

    uiRouteApp.controller('certController', function ($scope, $state, $compile) {
    $scope.showErrorMessage = false;
    $scope.certObj = {
        student: []
    };
    $scope.certObjArr = [];
    $scope.addDirective = function () {
        $scope.countForArray++;
        $scope.direcCountArray.push($scope.direcCountArray.length);
    }
});

在指令中，您正在创建一个新的隔离作用域。即使这些属性的名称相同，它们也不是对同一对象的引用。这造成了一点混乱，因为您将一个对象传递到指令中，并给它一个不同的名称，混淆了它的用途

在主HTML文件中，指令看起来像
。这将获取
certObj.student[direc]
的任何值，并将其存储在
obj
中

在指令的
范围中
有
certObj:'=obj'
。这将获取
obj
中的任何值，并将其存储在
certObj
中。您在此处使用名称
certObj
这一事实造成了混淆，因为您没有在中传递
certObj
，您在中传递了
certObj
的子项，但为其分配的名称并不清楚

在指令的HTML中，有
ng model=“certObj.student[direc].studentName”
。这是前面提到的混淆的产物，在指令上下文中，
certObj
不是
certObj
，而是一个子元素。因此，
certObj.student
在这里并不存在，而
direc
在这里是
未定义的

若要更正此问题，请从指令的作用域开始，并使用清楚显示传入内容的名称引用对象，即
thisStudent:'=obj'
。您知道，对于指令的每个副本，它都会得到一个学生，因此
thistudent
是有意义的

现在，在您的指令的HTML中，很清楚您在寻找什么
ng model=“thistudent.studentName”
感觉您的方法不对。您不应该将整个
certObj
传递给指令的每个实例，而应该只为每个迭代传递
certObj.student
对象。然后您的指令可以直接在其绑定中引用
student.studentMark
。@Claies。嗯，我想我只通过了
certObj.student
。查看
ng repeat
行（
obj=certObj.student[direc]
）。如果这不是你的意思，请解释。这似乎是问题的一部分。您的
studdirective
的作用域具有
certObj:'=obj'
，并且您仍然试图引用
certObj.student
，但您正在传入
obj=certObj.student[direc]
，这意味着在指令中，
certObj==certObj.student[direc]
，它肯定不会有
student
数组….@Claies但是在指令的html模板中，我做了
ng model=“certObj.student[direc].studentName“
，这可能不起作用，因为
direc
中没有定义，你应该尝试的是指令范围内的
student:'=obj'
，然后在HTML中输入
ng model=“student.studentName”
。
    uiRouteApp.controller('certController', function ($scope, $state, $compile) {
    $scope.showErrorMessage = false;
    $scope.certObj = {
        student: []
    };
    $scope.certObjArr = [];
    $scope.addDirective = function () {
        $scope.countForArray++;
        $scope.direcCountArray.push($scope.direcCountArray.length);
    }
});