Wie wird das aktuelle Element beim mouseover in angularjs anvisiert?

Ich möchte ein benutzerdefiniertes Symbol auf dem Thumbnail anzeigen. In meinem Beispiel ist "upload-thumb" mein Daumen und mein benutzerdefiniertes Symbol ist span.Wie wird das aktuelle Element beim mouseover in angularjs anvisiert?

Das Problem ist, dass ich nicht sicher bin, wie man aktuell verschobene Miniaturansicht anvisiere, da ich einige von diesen dynamisch erzeugt habe. Als was ich gerade habe, wenn ich schwebe, erscheinen alle Spanikonen.

<div class="upload-thumb" ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)"><span class="delete-media" ng-show="hoverEdit"><i class="mdi mdi-delete"></i></span></div> 

    $scope.hoverIn = function(event){ 
    // this.hoverEdit = true; 
    }; 

$scope.hoverOut = function(event){ 
    // this.hoverEdit = false; 
    };

Nicht sicher warum, aber bin damit für eine Weile zu kämpfen. Vielen Dank.

Quelle

2017-04-10 funguy

Ja, aber wie sollte der Code mit event.target aussehen? – funguy

Sie können es mit CSS erreichen, d. H. '.upload-thumb span.delete-media: hover {color: red}' – Satpal

Es ist komplizierter als das. Bereich ist standardmäßig nicht sichtbar. Irgendwie muss ich dies zuweisen.hoverEdit = true; nur zum aktuellen schwebenden Gegenstand. – funguy

Hier ist ein Beispiel-Snippet Ihr Element abzurufen und zu tun, was man will:

angular.module('app', []); 
 

 
angular.module('app') 
 
.controller('ExampleController', ['$scope', function($scope) { 
 

 
\t $scope.hoverIn = function(event){ 
 
\t  // this.hoverEdit = true; 
 
\t  var el = getElement(event); 
 
\t  // Do something with element, for example add a class 
 
\t  el.addClass('myClass'); 
 
\t  console.log('hoverIn ' + el); 
 
\t }; 
 

 
\t $scope.hoverOut = function(event){ 
 
\t  // this.hoverEdit = false; 
 
\t  var el = getElement(event); 
 
\t  // Do something with element, for example remove a class 
 
\t  el.removeClass('myClass'); 
 
\t  console.log('hoverOut ' + el); 
 
\t }; 
 

 
\t function getElement(event) { 
 
\t \t return angular.element(event.srcElement || event.target); 
 
\t } 
 

 
}]);

<!doctype html> 
 

 
<html lang="en" ng-app="app"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
    <style> 
 
    .myClass { color: blue; } 
 
    </style> 
 
</head> 
 
    
 
<body ng-controller="ExampleController"> 
 
\t <div ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb1</div> 
 
\t <div ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb2</div> 
 
</body> 
 
</html>

Edit: Hier ist ein weiteres Beispiel vorherigen Geschwister (zusätzliche Anforderung von der Post Autor) Manipulieren

angular.module('app', []); 
 

 
angular.module('app') 
 
.controller('ExampleController', ['$scope', function($scope) { 
 

 
\t $scope.hoverIn = function(event){ 
 
\t  var el = getElement(event); 
 
\t  var previousElement = el.previousElementSibling; 
 
\t  if(previousElement) { 
 
\t  \t angular.element(previousElement).addClass('myClass'); 
 
\t  } 
 
\t }; 
 

 
\t $scope.hoverOut = function(event){ 
 
\t  var el = getElement(event); 
 
\t  var previousElement = el.previousElementSibling; 
 
\t  if(previousElement) { 
 
\t  \t angular.element(previousElement).removeClass('myClass'); 
 
\t  } 
 
\t }; 
 

 
\t function getElement(event) { 
 
\t \t return event.srcElement || event.target; 
 
\t } 
 

 
}]);

<!doctype html> 
 

 
<html lang="en" ng-app="app"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
    <style> 
 
    li { margin: 12px; } 
 
    .myClass { color: blue; } 
 
    </style> 
 
</head> 
 
    
 
<body ng-controller="ExampleController"> 
 

 
<ul> 
 
\t <li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb1</li> 
 
\t <li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb2</li> 
 
\t <li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb3</li> 
 
\t <li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb4</li> 
 
\t <li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb5</li> 
 
</ul> 
 

 
</body> 
 
</html>

Quelle

2017-04-10 11:19:10

das könnte tatsächlich funktionieren, aber noch nicht sicher, wie man das data = thumbid dynamisch erzeugt mit einer steigenden Zahl, da ich dieses html dynamisch wie folgt erzeuge: var newelement = $ compile ('

') ($ scope); – funguy

Ok Ich hatte diese Information nicht ^^ Ich ändere mein Schnipsel, damit Sie das Element abrufen und tun können, was Sie damit machen wollen;) –

Ein letztes Bit. Klasse muss auf vorherige Geschwister angewendet werden. Wenn ich dieses Beispiel bekommen könnte, würde es funktionieren. – funguy

Nicht sicher ist das, was Sie suchen. Aber man kann das Kind Inhalt verstecken mit even.childNodes

im HTML-Pass $event.target statt nur Ereignis

<div class="upload-thumb" ng-mouseover="hoverIn($event.target)" ng-mouseleave="hoverOut($event.target)">text <span class="delete-media" >delete-icon</span></div>

dann können Sie verstecken/zeigen die entsprechenden Kindknoten

$scope.hoverIn = function(event){ 
     event.childNodes["1"].hidden = true 
     }; 

     $scope.hoverOut = function(event){ 
      event.childNodes["1"].hidden = false 
     }; 
Demo

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 
    
 
    $scope.hoverIn = function(event){ 
 
    event.childNodes["1"].hidden = true 
 
    }; 
 

 
    $scope.hoverOut = function(event){ 
 
     event.childNodes["1"].hidden = false 
 
    }; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div class="upload-thumb" ng-mouseover="hoverIn($event.target)" ng-mouseleave="hoverOut($event.target)">text <span class="delete-media" >delete-icon</span></div> 
 

 
    
 
</div>

Quelle

2017-04-10 11:16:02

In Ihrer hoverIn Funktion versuchen Sie event.currentTarget anstelle von this. Könnte das Problem lösen.

Quelle

2017-04-10 11:36:32

Wie wird das aktuelle Element beim mouseover in angularjs anvisiert?

Antwort

Verwandte Themen