在angularjs 1中动态添加与单个控制器关联的多个自定义指令

我有一个html模板附加到一个控制器和三个指令。有三个按钮。单击按钮时，会将一条指令添加到页面（使用ng click），如下所示（以下内容在我的控制器中不在指令中）：

现在，在我的控制器中，我将$rootscope分配给我的值，这些值必须在指令中使用，从而在指令中捕获它们。例如：

 $rootScope.dimensions = temp.map(d=>d.dimName);
 $rootScope.selectedDimensionName = '';
 $rootScope.selectedDimensionValue = '';

这就是我如何从添加的指令中检索值的方法：

var retriveValue = function() {
var filtersData = [];
var constraintsData = [];
var variablesData = [];
var ChildHeads = [$scope.$$childHead];
var currentScope;
while (ChildHeads.length) {
  currentScope = ChildHeads.shift();
  while (currentScope) {
    if (currentScope.dimensions !== undefined){
      filtersData.push({
        filterDimensionName: currentScope.selectedDimensionName,
        filterDimensionValue: currentScope.selectedDimensionValue,
        filterDimensionExtend: currentScope.selectedExtend,
        filterDimensionIsDateFiled: currentScope.isDateField
      });
    }
      if (currentScope.constraintDimensions !== undefined){
        filtersData.push({
        constraintDimensionName: currentScope.selectedConstraintName,
        constraintDimensionValue: currentScope.selectedConstraintValue,
        constraintDimensionExtend: currentScope.selectedConstraintExtend,
        constraintDimensionVariable: currentScope.selectedConstraintVariable,
        constraintDimensionOperator: currentScope.selectedOperator,
        constraintDimensionVariableValue: currentScope.constraintVariableValue,
        constraintDimensionIsDateField: currentScope.isDateFieldConstraint
      });
    }
      if (currentScope.variableNames !== undefined){
        console.log('currentScope.selectedVariableVariable',currentScope.selectedVariableVariable);
      filtersData.push({
        variableName: currentScope.selectedVariableVariable,
        variableOperator: currentScope.selectedVariableOperator,
        variableValue: currentScope.variableVariableValue,
        variableExtend: currentScope.selectedVariableExtend
      });
    }

    currentScope = currentScope.$$nextSibling;
  }
}
return filtersData;
}

这是指令的模板之一：

<div >
<div>
  <label>Dimension</label>  
  <select class = "custom-select custom-select-lg mb-6" ng-model="selectedDimensionName" ng-options="dimension for dimension in dimensions">
      <!-- <option ng-repeat="table in tables track by $index">{{table}}</option> -->
  </select>
</div>


<div>
    <label>Date Field</label>
    <input type="checkbox" ng-model="isDateField">
</div>

<div>
  <label>Value</label>
  <select multiple class = "custom-select custom-select-lg mb-6" ng-model="selectedDimensionValue" ng-options="val for val in ((dimensionsOld | filter:{'dimName':selectedDimensionName})[0].dimValues)"></select>
  </span>
</div>


<div>
    <label>Extend</label>
    <select class = "custom-select custom-select-lg mb-6" ng-model="selectedExtend" ng-options="val for val in extend"></select>
    </span>
  </div>
  <button type="button"  class="btn btn-danger btn-lg" ng-click="Delete($event)">Delete</button>

维
日期字段
价值
延伸
删除

这是在主html中添加指令：

<div id="filterDimension">    </div>

我知道这不是一个好办法，但请建议一个更好的办法。 其次，必须进行新的更改，其中一个指令内将有一个按钮，单击该按钮将添加2个下拉列表（或仅添加一个或多个指令），并且可以根据需要添加任意次数（就像其他指令一样）。
这里的问题是，这是另一个指令中的一个指令，我面临着不寻常的行为，比如：

当我添加父指令时，它是好的，我添加子指令时，它是好的，但是当我添加第二个父指令并尝试添加其子指令时，它们会附加到第一个指令中

即使我设法摆脱了上述观点，我也不知道如何从这些指令中检索值

PS：我在AngularJS或前端方面是新手，比如RetrievValue（）和使用我从网上某处获得的rootscope

<div >
<div>
  <label>Dimension</label>  
  <select class = "custom-select custom-select-lg mb-6" ng-model="selectedDimensionName" ng-options="dimension for dimension in dimensions">
      <!-- <option ng-repeat="table in tables track by $index">{{table}}</option> -->
  </select>
</div>


<div>
    <label>Date Field</label>
    <input type="checkbox" ng-model="isDateField">
</div>

<div>
  <label>Value</label>
  <select multiple class = "custom-select custom-select-lg mb-6" ng-model="selectedDimensionValue" ng-options="val for val in ((dimensionsOld | filter:{'dimName':selectedDimensionName})[0].dimValues)"></select>
  </span>
</div>


<div>
    <label>Extend</label>
    <select class = "custom-select custom-select-lg mb-6" ng-model="selectedExtend" ng-options="val for val in extend"></select>
    </span>
  </div>
  <button type="button"  class="btn btn-danger btn-lg" ng-click="Delete($event)">Delete</button>

<div id="filterDimension">    </div>