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 のdetachを使用した場合 、問題はありませんでした。

これを行うためのより適切な方法は、 $transclude 関数を使用することだと思います。私がそれをした場合、デタッチとjqueryライブラリをまったく使用する必要がないかもしれません. いつかやってみます……。

于 2013-05-05T15:26:10.497 に答える