Динамическое добавление нескольких пользовательских директив, связанных с одним контроллером в Angularjs 1 - PullRequest
Новая
       9

Динамическое добавление нескольких пользовательских директив, связанных с одним контроллером в Angularjs 1

0 голосов
/ 05 июня 2018

У меня есть 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);
}

Аналогично для других кнопок добавляются другие директивы.Теперь я могу продолжать добавлять столько директив, сколько мне нравится, и это пример использования.Эти директивы в основном похожи на формы, содержащие выпадающие списки, поля ввода или оба.Значения, которые пользователь выбирает из раскрывающихся списков или вводит в поля ввода, должны быть отправлены обратно на сервер для сохранения в БД.Это одна из директив (другие очень похожи): 

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 выпадающих списка (или просто еще одна директива), которые можно добавлять столько раз, сколько необходимо (как и другие).директива).
Проблема в том, что эта директива внутри другой директивы, и я сталкиваюсь с необычным поведением вроде:

  1. Когда я добавляю родительскую директиву, это нормально, я добавляюдочерние директивы работают нормально, но когда я добавляю второго родителя и пытаюсь добавить его дочерний элемент, они добавляются в первую директиву.

  2. Даже если мне как-то удастся выйти из вышеприведенного пункта, я не знаю, как извлечь значения из таких директив.

PS:Я новичок в AngularJS или front-end в этом отношении, retriveValue () и использую rootcope, полученный где-то онлайн.

...