Question

我想创建一个仅属性的指令，将该元素转换为显示兄弟元素的触发器。这是一个简化的例子：

<button show-box>Click Me</button>

我希望showBox指令在按钮旁边创建隐藏的<div>元素，并将单击事件附加到按钮上。

app.directive('showBox', function () {
    return {
        template: '<div ng-show="boxVisible"><more-directives></more-directives></div>',
        link: function (scope, element, attrs) {
            scope.boxVisible = false;
            element.click(function () {
                scope.$apply(function () {
                    scope.boxVisible = true;
                });
            });
        })
    };
});

但是，我似乎只能得到我的指令，用我的指令模板替换整个按钮元素（replace: true）或将模板嵌套在按钮本身（replace: false）中。

我想我可以省略模板，只需将点击事件附加到element并使用element.after添加一些标记来执行JQuery样式，但我想知道是否有更正式的“角度方式”实现这一目标。另外，在兄弟元素中，我正在使用其他指令，并且如果我这样做，则必须手动编译标记，这似乎有点hackish。

我对角度转换知之甚少，并且即将开始沿着那条道路前行，看看它是否与我正在尝试做的事情有关，但我想我先问这里。

关于如何创建这样的指令的任何想法？

Answer 1

您可以通过修改指令的编译功能来完成此操作：

app.directive('showBox', function() {
  return {
    compile: function(iElem) {

      // append whatever html you want here
      iElem.after('<div ng-show="boxVisible">derp</div>');

      // return the linking function from the compile function
      return function(scope, element, attr) {
        scope.boxVisible = false;
        element.on('click', function() {
          scope.$apply(function() {
            scope.boxVisible = !scope.boxVisible;
          });
        });
      };
    }
  };
});

我不确定您是否还需要$compile内容 - 如果iElem.after()模板中的指令不起作用，那么请查看该内容

Here's a plunker to demonstrate it working.

我可以强制我的angular指令将其模板添加为指令元素的兄弟吗？

1 个答案: