угловая пользовательская директива внутри ngif - установка его абсолютной ширины сына

Question

У меня есть настраиваемая угловая директива, которую я условно показываю, так как она находится внутри ng-if. Внутри моей пользовательской директивы я отображаю элементы html, один из которых имеет абсолютное позиционирование.

Я хотел бы установить ширину абсолютного элемента как ширину корня указателя. Обратите внимание: я не могу установить отображение корневого каталога директивы относительно.

Как бы вы посоветовали мне достичь такого подвига?

UPDATE: Вот jsfiddle - http://jsbin.com/qofolahani/edit?html,css,js,console,output

обратите внимание, что в функции связи я еще не CSS стиль элемента еще и, таким образом, ширина равна 0, что означает, что я не могу установить его в ширине дочернего div.

Answer 1

Ваш вопрос вы используете restrict: E.
Браузер не связывает метод getCalculatedStyle с нестандартными объектами DOM.

Изменить эту директиву приписывать помощью:

<div my-dir></div> 

И директива:

{ 
    restrict: 'A', 
    link : function (scope, element) { 
     element.addClass('my-dir'); 
     element.find('.my-dir-content').width(element.width()); 
    }, 
    template: '<div class="my-dir-content"></div>' 
} 

---

Или вы должны использовать только внутренние шаблонные дивы.
replace: false может помочь в этом.

{ 
    restrict: 'E', 
    link : function (scope, element) { 
    var o = element.find('.my-dir'); 
    var i = o.find('.my-dir-content'); 
    i.width(o.width()); 
    }, 
    replace: false, 
    template: '<div class="my-dir"><div class="my-dir-content"></div>/div>' 
} 

Или иначе, заменить родительский узел:

{ 
    restrict: 'E', 
    link : function (scope, element) { 
    var i = element.find('.my-dir-content'); 
    i.width(element.width()); 
    }, 
    replace: true, 
    template: '<div class="my-dir"><div class="my-dir-content"></div>/div>' 
} 

JSBin Preview

---

Бонус:
Вам нужен код, как это, чтобы обновить ширину на Wi ndow изменить размер:

$(window).on('resize', onResize); 
    function onResize() { 
    i.width(o.width()); 
    } 
    scope.$on('$destroy', function(){ 
    $(window).off('resize', onResize); 
    }); 

Answer 2

Вы должны добавить стиль CSS к корню директивы и установить эту позицию relative, что-то вроде

custom-directive { 
    position: relative; 
} 

Установка корневого элемента HTML на позиции: относительная позволит внутренние элементы HTML, чтобы занять позицию абсолютного в отношении директивы.

Тогда вы можете взять внутренний HTML элемент и установить

inner-html-element { 
    position: absolute; 
    width: 100%; 
}