Угловые директивы: как захватывать события элементов вложенной директивы?

Question

Я пытаюсь создать директиву для разделителя панелей. Простой: панель, разделитель, панель. Делитель - это div, созданный директивой, и он захватывает события перетаскивания.

Теперь, в принципе, он отлично работает, за исключением того, что когда у меня есть вложенный сплиттер (как вы можете видеть в HTML) - внутренний сплиттер не работает. По-видимому, события для внутреннего делителя вообще не запускают обработчики событий.

Я подозреваю, что это связано с тем, что обработчики событий создаются, а затем из-за того, что я удаляю и переставляю левую и правую панели, внутренний разделитель i, на который подписано, не тот, который в конечном итоге остается на 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

Благодаря Бен Надель (http://www.bennadel.com/blog/2439-My-Experience-With-AngularJS-The-Super-heroic-JavaScript-MVW-Framework.htm) я понял проблему:

Использование element.html ("") убил обработчики событий (хотя я сохранил объекты панели!). Когда я использовал jQuery отсоединить, проблем не возникло.

Я думаю, что чем больше угловой способ сделать это, будет использовать функцию $ transclude. Если бы я сделал это, мне, возможно, не понадобилось бы использовать detach и библиотеку jquery. я попробую это когда-нибудь ....