2013-12-16 1 views
2

Я сделал это жидкое меню в jQuery: http://jsfiddle.net/krongbongtjong/5LeJh/ Легкий peasy, но я хочу сделать это Угловым способом, но я не знаю, как атаковать это.(начинающий) Как справиться с прокруткой по угловому пути

Если я директива

<div stackables class="stackables"> 

Как это директива знает, что «каскадные» элементы для измерения и изменение?

Если я вместо этого сделать директиву на уровне ребенка

<div stackable class="stackable"> 

Как это известно о его двойников наращиваемых-х? И как я могу избежать подписки на более чем 1 событие прокрутки?

Очень общий вопрос для начинающих. Надеюсь, это не слишком расплывчато для stackoverflow.

ответ

2

Привет, обычно при создании вашей директивы у вас будет доступ к элементу DOM, к которому прилагается директива. Это второй параметр функции связи и это выглядит следующим образом:

link: function (scope, elem, attrs) //elem is the dom element 

Теперь, когда вы знаете, что вы можете делать все, что вы хотите поместить директиву на родительском узле или дочерних узлов. Но, на мой взгляд, постановка директивы на родительский узел будет «угловым способом» этого. Чтобы ответить на ваш вопрос:

Как эта директива знает, какие «штабелируемые» элементы для измерения и изменить?

Вам нужно будет познакомиться с transclude concept (ищите перевод в документе). В основном при использовании transclude внутренние дочерние элементы вашего элемента DOM будут перенаправлены в директиву. Пример:

// Template 
<stackables> 
    <li class="stackable">Item 1</li> 
    <li class="stackable">Item 2</li> 
    ... 

// Directive 
directive('stackables', function() { 
return { 
    restrict: 'E', 
    transclude: true, <- Here it is 
    scope: {}, 
    template: '<ul class="stackables" ng-transclude></ul>', <- do not miss the ng-transclude here 
    link: function (scope, elem) { 
    //1. elem is the ul dom node 
    //2. You can add an event listener from here 
    //3. You can find the li dom with something like 
    //elem.find('li'); 
    ... 

Наконец, вы должны быть в состоянии, чтобы прикрепить прокрутки слушателя событий, как обычно, к elem вашей директивы и вычислить размер ваших детей элементы с помощью функции поиска.

Смежные вопросы