2017-01-17 8 views
0

У меня возникают проблемы с угловой директивой, использующей атрибут компонента. В принципе, я хочу, чтобы кнопки были перетаскиваемыми. Я делаю это так:Контроллеры доступа из нескольких идентичных директив, имеющих одну и ту же родительскую область

<body> 
    <xx-button xx-draggable> 
    <xx-button xx-draggable> 
<body> 

См. Это JSFiddle для реализации.

В результате DOM является:

<xx-button class="ng-isolate-scope ng-scope" draggable="true" hm-panstart="$draggableCtrl.ondragstart($event)" hm-panend="$draggableCtrl.ondragend($event)" hm-panmove="$draggableCtrl.ondrag($event)" style="-moz-user-select: none;"> 
    <button class="btn ng-binding" ng-click="$ctrl.onclick()"> 
    CLICK ME 
    </button> 
</xx-button> 

ОЙ-перетаскиваемой директива изменит РОМ директивы ОЙ-кнопки, чтобы добавить несколько обработчиков молотков (я использую угловой молот) управлять сопротивлениями кнопки. Директива xx-draggable имеет свой собственный контроллер, который использует controllerAs, чтобы явно называть его ($draggableCtrl). Как я понимаю, controllerAs будет в основном подключать контроллер к области, поэтому в шаблоне вы можете обратиться к нему. Проблема в том, что в моем случае, кажется, controllerAs присоединяет оба контроллера к одному и тому же диапазону, что дает доступ только контроллеру директивы, примененной к второй кнопке. Поэтому, когда я перетаскиваю первую кнопку (button1), второй (кнопка2) эффективно перетаскивается ...

Я понимаю, что компонент должен иметь изолированный объем, поэтому оба не должны вмешиваться. controllerAs второй директивы должен присоединить $draggableCtrl к области второй кнопки и не должно быть перекрытия.

Любая идея, что происходит?

Update:

Я считаю, что основная причина моей проблемы описана here:

В целом можно применить более одной директивы к одному элементу, но может быть ограничение в зависимости от типа области , требуемой директивами. Следующие моменты помогут объяснить эти ограничения. Для простоты только две директив принимаются во внимание , но оно также применимо для нескольких директив:

[...]

изолированной сфера + нет сферы => Выделенной директивы будет использовать свой собственную создала изолированную объем. Другая директива будет использовать сфера его родителя

Таким образом, в самом деле, хх-перетаскиваемым не связан с хх-кнопочной сферы, но его родительской области, поэтому контроллер перезаписывается. На мой взгляд, это довольно противоречиво.

Итак, теперь мой вопрос: как мне управлять атрибутом директивы, чтобы иметь свою собственную область действия или, по крайней мере, иметь дело с областью директив xx-кнопок, зная, что я не контролирую тип области действия xx-button , Я просто разрабатываю xx-перетаскиваемую директиву, которая должна применяться к любому виду виджетов?

ответ

0

Наконец-то я обосновался вдали от идеального решения, но тот, который действительно работает относительно «безопасным» способом, не делая предположений о том, как он используется.

Для того чтобы иметь возможность обращаться к контроллерам моей директивы независимо от шаблона, я создаю искусственный «подскоп». В функции связи, создать случайно названный элемент Области применения:

const subScope = '_' + Math.random() * 100000000000000000; 

поручает контроллер к этому случайно сгенерированному члену:

scope[subScope] = ctrl; 

Затем, когда я изменить DOM присоединять обработчик, я использую что случайная ссылка:

attr.$set('hm-panstart', subScope + '.ondragstart($event)'); 
attr.$set('hm-panend', subScope + '.ondragend($event)'); 
attr.$set('hm-panmove', subScope + '.ondrag($event)'); 

Смотрите эту JSFiddle для рабочего раствора.