Also mache ich eine einfache Anweisung namens "Hover", es ist ein grundlegendes Navigationsmenü, das die Farbe ändert, wenn Sie mit der Maus über ein bestimmtes Aba fahren. Siehe meinen Skriptcode:

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 + '}');
        }
    }
});

Und jetzt mein 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>

Dies funktioniert gut, aber wenn ich mein HTML auf diese Weise setzen:

<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>

Dies funktioniert nicht, ich muss mein "li" mit dem "hover" -Tag umbrechen, damit dies funktioniert (und ja, ich ändere die Eigenschaft "restricted" auf "A"). Warum? Und eine andere Frage, mein "li" mit "hover" -Tag zu umschließen, ist ein schlechter Trick, um mein HTML zu validieren?

Dies ist mein HTML kompiliert:

<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>

Wenn ich mit der Maus über diese Elemente fahre, wird meine Funktion "onHover" nicht aufgerufen.