Вложенная директива AngularJS не получает оценку

Question

Я только начал создавать угловые директивы (я тоже новичок в структуре), но я сталкиваюсь с проблемами, в которых вложенная директива, кажется, игнорируется. Основой для кода моих директив является UI Bootstrap's «tabs» и «pane».

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

Вот бухнуться моей ситуации:

http://plnkr.co/edit/K4n2Mx3kZyvVYGDyJ7t9

Answer 1

Ты неправильно используя ngTransclude, поместив его внутрь ngRepeat. Это своего рода ситуация с курицей/яйцом, потому что нет ничего, что можно было бы повторить, ничто не закроется.

Кроме того, поскольку вы указываете компоненты в HTML, вам даже не нужно ngRepeat в вашем шаблоне.

http://plnkr.co/edit/aYjdd4skbKC3FEM3lCfY?p=preview

template: 
    '<section class="layout">' + 
    '<h4>Before all components</h4>' + 
    '<div ng-transclude></div>' + 
    '<h4>After all components</h4>' + 
    '</section>' 

Answer 2

При использовании нг-повтора, он создает новую область и это заставляет вас нг-transclude не в нужном объеме для инъекций включения.

Поэтому, когда вы удаляете ng-repeat, вы получаете отображаемые компоненты.

Теперь для того, чтобы контролировать расположение, вы можете добавить элементы к контроллерам, как вы делаете с их области, а затем макет их соответствующим образом в контроллере:

// inside the controller 
this.addComponentElement = function (componentElement) { 
    componentElements.push(componentElement); 
}; 
// watch for array changes and handle layout 

Или, вы можете использовать функция transclude в комбинации компиляции + ссылку, чтобы получить ссылку на DOM и включены через манипулировать его расположение:

compile:function(telement, tAttrs, transcludeFn){ 
    return function(scope, element, attrs){ 
     transcludeFn(scope, function(transcludedDom){ 
     // layout the transcludedDom 
     }) 
    }