Цель: создание поведения с использованием директив с обменом данными между двумя родственными элементами (каждая их собственная директива).
Поведение для использования в примере: содержимое статьи скрыто по умолчанию. Когда щелкнут заголовок, я хочу, чтобы содержимое соответствующей статьи отображалось.
Ловушка: связанные элементы статьи должны связываться друг с другом, не будучи вложенными в один родительский элемент или директиву.
<div article="article1">this is my header</div>
<div id="article1" article-content>this is content for the header above</div>
<div article="article2">this is my header</div>
<div id="article2" article-content>this is content for the header above</div>
Я знаю, что было бы проще разместить контент внутри директивы статьи, однако этот вопрос должен выяснить, как решить такую ситуацию.
Может ли директива content передавать ссылку на соответствующую директиву статьи?
Этот код не очень полезен, как сейчас, но это отправная точка. Как бы это сделать?
.directive('article', function(){
return {
restrict: "A",
controller: function($scope) {
$scope.contentElement = null;
this.setContentElement = function(element) {
$scope.contentElement = element;
}
},
link: function(scope, element) {
element.bind('click', function(){
// Show article-content directives that belong
// to this instance (article1) of the directive
}
}
}
}
.directive('articleContent', function(){
return {
require: "article",
link: function(scope, element, attrs, articleCtrl) {
// Maybe reference the article i belong to and assign element to it?
// I can't though because these are siblings.
}
}
}
