1
我試圖爲窗格拆分器創建一個指令。簡單：窗格，分隔線，窗格。 divider是由指令創建的div，它捕獲拖放事件。Angular指令：如何捕獲嵌套指令元素的事件？
現在，基本上，它工作正常，除了當我有一個嵌套拆分器（正如你可以在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>