Question

我正在尝试扩展revolunet / angular-carousel的'rnCarouselControls'指令。当没有焦点在图像上时，我想用隐藏逻辑（隐藏箭头）来扩展它。我读过“理解指令”一文，似乎堆叠技术可能有所帮助，但无法使其正常工作。用

尝试了https://stackoverflow.com/a/19228302/1407492此解决方案

app.directive('rnCarouselControls', function ($compile) {
      return {
          restrict: 'A',
          replace: true,
          priority: 1000,
          terminal:true,
          compile: function compile(element, attrs) {
              element.removeAttr("rn-carousel-controls");
              element.attr('ng-show', '$parent.activecontrols');
              return {
                  pre: function preLink(scope, iElement, iAttrs, controller) { },
                  post: function postLink(scope, iElement, iAttrs, controller) {
                      $compile(iElement)(scope);

                  }
              };
          }
      };
  })

如果terminal=true则第二个指令不会触发。从接受的答案：

编译我们的自定义指令时，它将修改元素添加指令并删除自身并使用$ compile服务编译所有指令（包括那些被跳过的指令）。

不适用于此指令。

Answer 1

所以，正如我所评论的那样，解决方案只能通过css实现：

.carousel-control{
  visibility:hidden;
}

然后在

时显示

carousel:focus .carousel-control{
  visibility:visible;
}

扩展angular-carousel指令（模板+ ng-show绑定）

1 个答案: