Question

我想在ui.boostrap.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＆＃39; accordionGroup＆＃39;，指令要求＆＃39; accordionTransclude＆＃39;，无法找到！

错误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);
        }
      });
    }
  };

所以我想它试图在视图中找到匹配accordionGroup的父指令，但是因为你添加了accordionGroupLazyOpen而不是accordionGroup它找不到它。

在您提供的错误页面中说明：

当HTML编译器尝试处理指令时，会发生此错误指定指令定义中的require选项，但是当前DOM上不存在必需的指令控制器 element（或其祖先元素，如果指定了^）。

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

angular-bootstrap添加了新的指令dosn＆t。工作

1 个答案: