Events 角度指令：如何捕捉嵌套指令的事件'；s元素？

我正在尝试为窗格拆分器构建一个指令。简单：窗格，分隔符，窗格。分隔符是由指令创建的div，它捕获拖放事件

现在，基本上，它工作得很好，除了当我有一个嵌套的拆分器（如你在HTML中看到的）时，内部拆分器不工作。显然，内部分隔符的事件根本不会触发事件处理程序

我怀疑这是因为创建了事件处理程序，然后，由于我删除和重新放置左窗格和右窗格的方式，我订阅的内部分隔符不是在指令初始化后最终留在DOM上的分隔符

有什么想法吗

以下是相关代码：

angular.module('myApp.directives',[]).directive('splitter', function() {
return {
  restrict: "E",
  transclude: true,
  scope: true,
  template: "<div ng-transclude></div><div style='clear:both'></div><",
  link: function(scope, element, attrs) {
var pane1, pane2;
if (attrs.orientation.toLowerCase()==="v") {
    pane1 = angular.element(element.find("left")[0]);
    pane2 = angular.element(element.find("right")[0]);
    pane1.css( {
      float:"left"
    });
    pane2.css( {
      float:"left"
    });
  }
scope.pane1 = pane1;
scope.pane2 = pane2;

element.html("");
element.append( scope.pane1).append(scope.divider).append( scope.pane2);
var div = scope.divider;    
div.bind("dragstart", function( ev )  {
  div.css( "opacity", 0.5 );
  ev.stopPropagation();
})
.bind("dragend", function( ev)  {
  scope.pane1.css( "width", ev.x+"px" );
  div.css( "left", ev.x+"px" );
  div.css( "opacity", 1);
  ev.stopPropagation();
});

  },
  controller: function( $scope,$element, $attrs, $transclude ) {
var div = angular.element("<div draggable='true' style='float:left;height:100%' class='vdivider'></div>");
$scope.divider = div;
  }
}
});

angular.module（'myApp.directives'，[]）.directive（'splitter'，function（）{
返回{
限制：“E”，
是的，
范围：正确，
模板：“多亏了Ben Nadel（），我理解了这个问题：

使用element.html（“”）终止了事件处理程序（即使我保留了窗格对象！）。当我使用jquery的detach时，没有问题

我认为更合适的方法是使用$transclude函数。如果我这样做，我可能不需要使用detach和jquery库。我会在某个时候尝试一下……
感谢Ben Nadel（），我理解了这个问题：

使用element.html（“”）终止了事件处理程序（即使我保留了窗格对象！）。当我使用jquery的detach时，没有问题

我认为更合适的方法是使用$transclude函数。如果我这样做了，我可能不需要使用detach和jquery库。我以后会试试

<style>
.mycontainer {
  height: 500px;
  border: 1px solid green;
  padding: 5px;
  margin: 10px;
}
.vdivider {
  width: 5px;
  border: 1px double silver;
  background: rgb(200,220,210);
}
</style>

<div class="mycontainer">
  <splitter orientation="v" >
<left>
  left pane
</left>
<right>
  <div class="mycontainer">
    <splitter orientation="v">
      <left>
    bla bla
      </left>
      <right>
    bli bli
      </right>
    </splitter>
  </div>
</right>

  </splitter>
</div>