so i'm making a simple directive called "hover", it's a basic nav menu that when you pass a mouse over a specific aba, this aba changes the color. See my script code:
var app = angular.module('myModule', []);
app.directive('hover', function(){
return{
restrict: 'E',
controller: function($scope) {
$scope.hover = null;
$scope.selected = null;
$scope.onHover = function (index){
$scope.hover = index;
}
$scope.mouseLeave = function(){
if($scope.selected)
$scope.hover = $scope.selected;
else
$scope.hover = -1;
}
$scope.onClick = function(index) {
$scope.hover = index;
$scope.selected = index;
}
},
compile: function(el, attrs){
el.children().attr('data-ng-mouseover', 'onHover('+attrs.index+')');
el.children().attr('data-ng-mouseleave', 'mouseLeave()');
el.children().attr('data-ng-click', 'onClick('+attrs.index+')');
el.children().attr('data-ng-class', '{'+ attrs.onhover +': hover == ' + attrs.index + ' || selected == ' + attrs.index + '}');
}
}
});
And now my html:
<ul>
<hover index="0" onhover="hover"><li>Home</li></hover>
<hover index="1" onhover="hover"><li>About Us</li></hover>
<hover index="2" onhover="hover"><li>Contact</li></hover>
<hover index="3" onhover="hover"><li>Share with us!</li></hover>
</ul>
This is working fine, but when i put my html in this way:
<ul>
<li hover index="0" onhover="hover">Home</li>
<li hover index="1" onhover="hover">About Us</li>
<li hover index="2" onhover="hover">Contact</li>
<li hover index="3" onhover="hover">Share with us!</li>
</ul>
This doesn't work, i have to wrap my "li" with "hover" tag to make this work(and yes, i'm changing the restrict property to "A"), why? And another question, wrapping my "li" with "hover" tag is a bad trick to validation my html?
This is my html compiled:
<ul>
<li onhover="hover" index="0" hover="" data-ng-mouseover="onHover()">Home</li>
<li onhover="hover" index="1" hover="" data-ng-mouseover="onHover()">About Us</li>
<li onhover="hover" index="2" hover="" data-ng-mouseover="onHover()">Contact</li>
<li onhover="hover" index="3" hover="" data-ng-mouseover="onHover()">Share with us!</li>
</ul>
When i pass the mouse over these elements, my function: "onHover" doesn't is called.
$compile
, there are better ways for binding event listeners to a scope. compile function
?$compile
got down to these children elements to collect their directives, so every change you make to the contents of the template element will be compiled and linked with the continuation of the compilation phase.$compile
will not look for more directives in that same element because it's only collecting directives once per each DOM element.$compile(el)
but my browser crashed (don't laugh at me), The reason is it got into a loop where it's infinitely compiling itself.$compile
again.here is a plunker: http://plnkr.co/edit/x1ZeigwhQ1RAb32A4F7Q?p=preview
app.directive('hover', function($compile){
return{
restrict: 'A',
controller: function($scope) {
// all the code
},
priority: 1001, // we are the first
terminal: true, // no one comes after us
compile: function(el, attrs){
el.removeAttr('hover'); // must remove to prevent infinite compile loop :()
el.attr('data-ng-mouseover', 'onHover('+attrs.index+')');
el.attr('data-ng-mouseleave', 'mouseLeave()');
el.attr('data-ng-click', 'onClick('+attrs.index+')');
el.attr('data-ng-class', '{'+ attrs.onhover +': hover == ' + attrs.index + ' || selected == ' + attrs.index + '}');
var fn = $compile(el); // compiling again
return function(scope){
fn(scope); //
}
}
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With