Question

我创建了一个指令SELECT CASE WHEN ResultTableName LIKE '%Loss_ByEvent]' THEN 'CREATE TABLE dbo.' + ResultTableName + N' ( ' + CreateStmt + N' ) ON Loss_ByAnalysis(SliceID)' WHEN ResultTableName LIKE '%Loss_ByGeo]' THEN N'CREATE TABLE dbo.' + ResultTableName + N' ( ' + CreateStmt + N' ) ON Loss_ByAnalysis(SliceID)' ELSE N'CREATE TABLE dbo.' + ResultTableName + N' ( ' + CreateStmt + N' )' END AS Sqlstmt ,@DBName = DBName ,@ResultTableName = ResultTableName FROM #CreateResult_ResultTables lr WHERE ID = @ResultTableCount;，每次单击一个按钮时都会动态添加该指令。我在指令中有输入字段，我希望将其附加到html控制器（<stu-directive>）中的对象作为属性以及html输入字段中的其他属性（我的意思是指令部分外部）。

在我使用该指令的html中，我使用CertObj和一个只有递增值的数组。单击按钮时，我将一个值推入数组，以便在ng-repeat内添加新指令。

ng-repeat是html控制器中的一个对象。我想将所有动态添加的指令的输入字段的值附加到对象。我在certObj中有一个数组student:[]以及其他属性。我使用此数组certObj来存储指令student中的对象。

但是student:[{inputDatafromdirective},{inputDatafromdirective}]数组只有一个对象（最后一个指令）。每个指令都应该将其输入字段值推送到student对象的student数组。但certObj只有一个certObj。

将{datafromlastdirective}与<stu-directive>：

一起使用的html

ng-repeat

<div class="certFull" id=""> <stu-directive ng-transclude ng-repeat="direc in direcCountArray" obj=certObj.student[direc] >  <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>的html：

stu-directive

指令：

<div  ng-transclude class="container-fluid">
   <div class="col-md-6">
      <label for="studentNameId">Student name</label>
   </div>
   <div class="col-md-6">
      <select class="form-control" ng-model="certObj.student[direc].studentName"> <!--direc is undefined -->
         <option>Stu1</option>
         <option>Stu2</option>
      </select>
   </div>
   <div class="col-md-6"><label for="studentNameId">Student mark</label></div>
   <div class="col-md-6">
      <input type="number" class="form-control" ng-model="certObj.student[direc].studentMark" placeholder="Student mark" />
   </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) {

            })
        }],
     }
})

Answer 1

在您的指令中，您正在创建一个新的隔离范围。即使属性命名相同，它们也不能引用同一个对象。这造成了一些混乱，因为你正在将一个对象传递给你的指令，并给它一个不同的名称，这会混淆它的目的。

在主HTML文件中，您的指令看起来像<stu-directive ng-transclude ng-repeat="direc in direcCountArray" obj=certObj.student[direc] >。这将取certObj.student[direc]的任何值，并将其存储在obj。

在指令scope中，您有certObj: '=obj'。这将取obj中的任何值，并将其存储在certObj中。您在此使用名称certObj这一事实造成了一个混乱点，因为您没有通过certObj，您通过了certObj的孩子，但正在分配这个名字并没有说清楚。

在指令的HTML中，您有ng-model="certObj.student[direc].studentName"。这是前面提到的混淆的产物，因为在指令的上下文中，certObj不是certObj而是已经是子元素。因此，certObj.student在这里确实不存在，而direc无论如何都在undefined。

要纠正此问题，请从指令的范围开始，并使用名称清楚地显示传入的内容，即thisStudent: '=obj'，引用该对象。你知道，对于指令的每个副本，它都是一个学生，所以thisStudent是有道理的。

现在，在您的指令的HTML中，它清楚您要找的是什么。 ng-model="thisStudent.studentName"。

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

1 个答案: