Question

我正在尝试为窗格分割器构建一个指令。简单：窗格，分隔符，窗格。分隔符是由指令创建的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;
  }
}
});

这是HTML：

<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>

Answer 1

感谢Ben Nadel（http://www.bennadel.com/blog/2439-My-Experience-With-AngularJS-The-Super-heroic-JavaScript-MVW-Framework.htm），我理解了这个问题：

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

我认为更加角度正确的方法是使用$ transclude函数。如果我这样做，我可能不需要使用detach和jquery库。我会尝试一下......

Angular指令：如何捕获嵌套指令元素的事件？

1 个答案: