javascript - angular-bootstrap 添加新指令不起作用

Question

我想在 ui.boostrap.accordion 模块中创建一个新指令以避免 Accordion 打开点击事件。

我在另一个 file.js 中有以下代码:

angular.module('ui.bootstrap.accordion')
.directive('accordionGroupLazyOpen', function() {
  return {
    require: '^accordion',         
    restrict: 'EA',
    transclude: true,              
    replace: true,                
    templateUrl: function(element, attrs) {
      return attrs.templateUrl || 'template/accordion/accordion-group.html';
    },
    scope: {
      heading: '@',               
      isOpen: '=?',
      isDisabled: '=?'
    },
    controller: function() {
      this.setHeading = function(element) {
        this.heading = element;
      };
    },
    link: function(scope, element, attrs, accordionCtrl) {
      accordionCtrl.addGroup(scope);

      scope.openClass = attrs.openClass || 'panel-open';
      scope.panelClass = attrs.panelClass;
      scope.$watch('isOpen', function(value) {
        element.toggleClass(scope.openClass, value);
        if (value) {
          accordionCtrl.closeOthers(scope);
        }
      });

      scope.toggleOpen = function($event) {
      };
    }
  };
})

问题是当我执行应用程序时出现以下错误:

Controller 'accordionGroup', required by directive 'accordionTransclude', can't be found!

错误 link

有什么想法吗？

Answer 1

正如我从 source code 中看到的那样(也许不是您的版本，但仍然相同):

// Use in the accordion-group template to indicate where you want the heading to be transcluded
// You must provide the property on the accordion-group controller that will hold the transcluded element
.directive('uibAccordionTransclude', function() {
  return {
    require: '^uibAccordionGroup',  // <- look at this line in your version
    link: function(scope, element, attrs, controller) {
      scope.$watch(function() { return controller[attrs.uibAccordionTransclude]; }, function(heading) {
        if (heading) {
          element.find('span').html('');
          element.find('span').append(heading);
        }
      });
    }
  };

所以我猜它会尝试在 View 中找到与 accordionGroup 匹配的父指令，但是由于您添加了 accordionGroupLazyOpen 而不是 accordionGroup它找不到它。

在您提供的错误页面中指出:

This error occurs when HTML compiler tries to process a directive that specifies the require option in a directive definition, but the required directive controller is not present on the current DOM element (or its ancestor element, if ^ was specified).

如果您查看 accordion-group-template 文件，您会看到 accordionTransclude 指令在那里被调用。