AngularJS Несколько директив, запрашивающих включение на: - PullRequest
Новая
       13

AngularJS Несколько директив, запрашивающих включение на:

0 голосов
/ 21 октября 2019

Я пытаюсь выполнить модульное тестирование директивы angularJS, но когда я высмеиваю элемент, я получаю сообщение об ошибке Несколько директив, запрашивающих включение:

Директива выглядит следующим образом: 

angular
  .module("beckon.flint.anchoredPane", ["beckon.flint.utils.eventService"])
  .directive("anchoredPane", function() {
    return {
      replace: false,
      restrict: "AE",
      templateUrl: "anchoredPane",
      transclude: true,
      scope: {
        anchoredPaneCfg: "=anchoredPane",
      },
      link: function($scope, element) {
        var clickListeningElement = element.parent();
        if ($scope.anchoredPaneCfg.clickSelector) {
          clickListeningElement = element.closest(
            $scope.anchoredPaneCfg.clickSelector
          );
        }
        $scope.elements = {
          root: element,
          contentPlaceholder: element.find("#contentPlaceholder"),
          anchoredPane: element.find(".anchored-pane"),
          clickListeningElement: clickListeningElement,
        };
      },
    }
  })

Имя templateUrl - anchoredPane, которое будет отображаться в шаблоне HTML как anchored-pane, и оно также извлекает атрибут anchoredPaneCfg из атрибута шаблона anchored-pane.

В моем тесте я инициализирую шаблон следующим образом: 

it("initializes correctly", () => {
  // Arrange
  const element = angular.element(
    "<anchored-pane anchored-pane='something'>Here goes the template</anchored-pane>"
  );

  // Act
  $compile(element)($scope);
  $scope.$digest();
  // ....something

  // Assert
  // some assertions
});

Карма выдает ошибку

Несколько директив [anchoredPane (module: beckon.flint.anchoredPane)), anchoredPane (модуль: beckon.flint.anchoredPane)], запрашивающий включение на: <anchored-pane anchored-pane="something" class="ng-scope">

- Ошибка: $ compile: multidir Разногласия по нескольким директивам

Я попытался использовать: 

const element = angular.element(
  "<div anchored-pane='something'>Here goes the template</div>"
);

и: 

const element = angular.element(
  "<anchored-pane><div anchored-pane='something' anchored-pane='a thing'>Here goes the template</div></anchored-pane>"
);

Но тогда он не передает значение anchoredPaneCfg. Карма выдает ошибку

TypeError: Невозможно прочитать свойство 'clickSelector' из неопределенного

Как правильно смоделировать эту директиву, чтобы принять anchoredPaneCfg, не выдавая ошибку множественного включения?

...