AngularJS: Verhinderung von 'mouseenter' Ereignis auslösen, auf die Kind-Elemente

Ich Spiele jetzt mit dem AngularJS-framework und bin auf ein problem. Ich machte eine Richtlinie, die als "enter". Es löst Funktionen auf mouseenter und mouseleave. Ich bewarb es als Attribut in das table-row-Elementen. Es ist jetzt ausgelöst für jedes Kind-element (alle Spalten und etc), aber es sollte nur ausgelöst, wenn man mit der Maus über die Tabellenzeile.

Dies ist, wie mein Direktive sieht wie folgt aus: 

myapp.directive('enter', function(){
    return {
        restrict: 'A', //link to attribute... default is A
        link: function (scope, element){
            element.bind('mouseenter',function() {
                console.log('MOUSE ENTER: ' + scope.movie.title);
            });
            element.bind('mouseleave',function() {
                console.log('LEAVE');
            });
        }
    }
});

Hier ist ein Beispiel: http://jsfiddle.net/dJGfd/1/

Müssen Sie öffnen Sie die Javascript-Konsole zu sehen, die log-Meldungen.

Was ist der beste Weg, das zu erreichen die Funktionalität, die ich möchte in AngularJS? Ich bevorzuge nicht jQuery verwenden, wenn eine angemessene AngularJS Lösung.

  • Das sieht nach einem bug für mich. Nur eine kurze Notiz, Sie können auch die Winkel-Richtlinie namens "ng-mouseenter" / "ng-mouseleave". Meine Idee wäre es, speichern Sie die letzten das betreffende element und sehen, ob es anders ist.
InformationsquelleAutor JustGoscha | 2013-03-07
  1. 6

    Können Sie versuchen, diese:

    myapp.directive('enter', function () {
    return {
        restrict: 'A',
        controller: function ($scope, $timeout) {
            //do we have started timeout
            var timeoutStarted = false;

            //pending value of mouse state
            var pendingMouseState = false;

            $scope.changeMouseState = function (newMouseState) {
                //if pending value equals to new value then do nothing
                if (pendingMouseState == newMouseState) {
                    return;
                }
                //otherwise store new value
                pendingMouseState = newMouseState;
                //and start timeout
                startTimer();
            };

            function startTimer() {     
                //if timeout started then do nothing
                if (timeoutStarted) {
                    return;
                }

                //start timeout 10 ms
                $timeout(function () {
                    //reset value of timeoutStarted flag
                    timeoutStarted = false;
                    //apply new value
                    $scope.mouseOver = pendingMouseState;
                }, 10, true);
            }
        },
        link: function (scope, element) {
            //**********************************************
            // bind to "mouseenter" and "mouseleave" events
            //**********************************************
            element.bind('mouseover', function (event) {
                scope.changeMouseState(true);
            });

            element.bind('mouseleave', function (event) {
                scope.changeMouseState(false);
            });

            //**********************************************
            // watch value of "mouseOver" variable
            //or you create bindings in markup
            //**********************************************
            scope.$watch("mouseOver", function (value) {
                console.log(value);
            });
        }
    }
});

    Dasselbe an http://jsfiddle.net/22WgG/

    Auch statt 

    element.bind("mouseenter", ...);

    und 

    element.bind("mouseleave", ...);

    können Sie angeben,

    <tr enter ng-mouseenter="changeMouseState(true)" ng-mouseleave="changeMouseState(false)">...</tr>

    Sehen http://jsfiddle.net/hwnW3/

    InformationsquelleAutor kostik
Schreibe einen Kommentar