1

我正在尝试为窗格拆分器构建指令。简单：窗格、分隔线、窗格。分隔符是由指令创建的 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>
4

1 回答 1

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 库。有时间我会试试的......

于 2013-05-05T15:26:10.497 回答