tworzenie nowej dyrektywy z angularjs
więc tworzę prostą dyrektywę o nazwie „hover”, jest to podstawowe menu nawigacyjne, które po przekazaniu myszy nad konkretną abą zmienia kolor. Zobacz mój kod skryptu:
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 + '}');
}
}
});
A teraz mój 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>
To działa dobrze, ale kiedy umieściłem mój HTML w ten sposób:
<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>
To nie działa, muszę zawinąć mój „li” tagiem „hover”, aby to działało (i tak, zmieniam ograniczającą właściwość na „A”), dlaczego? I jeszcze jedno pytanie, zawijanie mojego tagu „li” za pomocą „hover” to zła sztuczka do sprawdzenia mojego HTML?
To jest mój skompilowany HTML:
<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>
Kiedy przekażę wskaźnik myszy nad tymi elementami, moja funkcja: „onHover” nie jest wywoływana.