角度引导添加新指令不起作用

angular-bootstrap add new directive dosn't work

本文关键字：指令 不起作用 新指令 添加      更新时间：2023-09-26

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

我在另一个文件中有以下代码.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) {
      };
    }
  };
})

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

控制器"手风琴组"， 指令要求 "手风琴排除"，找不到！

错误链接

有什么想法吗？

正如我从源代码中看到的（也许不是你的版本，但仍然是一样的）：

// 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 上不存在所需的指令控制器 元素（或其祖先元素，如果指定了 ^）。

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

相关文章：