Question

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

$scope.addFilterDimension = function() {
console.log('CLICKED!!!!!!!')
var divElement = angular.element(document.querySelector('#filterDimension'));
var appendHtml = $compile('<filter-directive></filter-directive>')($scope);
divElement.append(appendHtml);
}

与其他按钮类似，添加了其他指令。现在，我可以继续添加尽可能多的这些指令，这是这里的用例。这些指令基本上类似于包含下拉列表，输入框或两者的表单。用户从下拉列表中选择的值或输入框中的值必须被发送回后端以存储在DB中。这是其中一个指令（其他指令非常相似）：

anomalyApp.directive('filterDirective', function() {
return {
restrict: "E",
scope: {},
templateUrl:'filter-dimension.html',
controller: function($rootScope, $scope, $element) {
  $scope.dimensionsOld = $rootScope.dimensionsOld;
  $scope.dimensions = $rootScope.dimensions;
  $scope.selectedDimensionName = $rootScope.selectedDimensionName;
  $scope.selectedDimensionValue = $rootScope.selectedDimensionValue;     
  $scope.extend = $rootScope.extend;
  $scope.selectedExtend = $rootScope.selectedExtend;

  $scope.isDateField = $rootScope.isDateField;

  console.log($scope.dimensions);
  $scope.Delete = function(e) {
    //remove element and also destoy the scope that element
    $element.remove();
    $scope.$destroy();
  }
  }
 }
});

现在，在我的控制器中，我将$ 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或前端的新手，retriveValue（）和使用我从网上某处获得的rootcope。

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

0 个答案: