As a newcomer to AngularJS, I am facing some challenges while working with directives.
Currently, I am working on a navigation menu where my goal is to dynamically display different information within the .services-content section upon hovering over each li element in the .services menu. Additionally, I have successfully implemented a background color change effect based on the hovered item, but I am struggling with displaying custom content for each item.
This is how my HTML looks:
<div class="page-navigation row">
<div class="col-sm-4">
<!-- Some content here -->
</div>
<div class="col-sm-4">
<h6>Navigation</h6>
<nav>
<ul class="list-unstyled nav-list">
<!-- Here is my directive -->
<li class="services" showcontentonhover>
<ul class="list-unstyled">
<li>
<a href="fi.html">Go to Fi</a>
</li>
<li>
<a href="fa.html">Go to Fa</a>
</li>
<li>
<a href="fo.html">Go to Fo</a>
</li>
</ul>
</li>
<li>
<!-- some other link -->
</li>
<li>
<!-- some other link -->
</li>
<li>
<!-- some other link -->
</li>
</ul>
</nav>
</div>
<div class="col-sm-4 services-content">
<!-- Desired content should be displayed here! -->
<p>Each li in .services should have a corresponding paragraph here</p>
<a href="foo">This anchor item should link to the same URL as the hovered element</a>
</div>
Below is my directive:
app.directive('showcontentonhover',
function() {
return {
restrict: 'A',
link : function($scope, element, attrs) {
var el = element.find('li');
el.bind('mouseenter', function() {
$(this).siblings().removeClass('active-nav');
$(this).addClass('active-nav');
});
el.eq(0).bind('mouseenter', function() {
$('.services-content').css('background-color', '#14202B' );
// Need to modify the content of .services-content here
});
el.eq(1).bind('mouseenter', function() {
$('.services-content').css('background-color', '#1858a5' );
// Need to modify the content of .services-content here
});
el.eq(2).bind('mouseenter', function() {
$('.services-content').css('background-color', '#2196F3' );
// Need to modify the content of .services-content here
});
}
}
});
After my research, I believe that creating a directive template or utilizing transclude might solve this issue, but I'm still unsure. The AngularJS version I am using is 1.5.3.
Any help would be greatly appreciated. Thank you!