Tabellenzeile benutzerdefinierte Richtlinie nicht funktioniert

ich die CSS einer Tabellenzeile <tr> auf mouseenter und mouseleave Events geändert werden soll, indem Sie eine benutzerdefinierte Richtlinie erstellen:Tabellenzeile benutzerdefinierte Richtlinie nicht funktioniert

<!DOCTYPE html> 
<html ng-app="m1"> 
    <head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
    </head> 
    <body> 
    <table> 
     <custom_tr> 
     <td>Hello</td> 
     </custom_tr> 
     <custom_tr> 
     <td>Hi</td> 
     </custom_tr> 
     <custom_tr> 
     <td>Bye</td> 
     </custom_tr> 
    </table> 
    </body> 
    <script> 
    var m1 = angular.module("m1", []); 

    m1.directive('custom_tr', function() 
    { 
     var d={}; 
     d.restrict = 'E'; 
     d.link = function(scope, element, attr) 
     { 
     element.bind('mouseenter', function(){ 
      element.css({'font-style': 'italic'}); 
     }); 
     element.bind('mouseleave', function(){ 
      element.css({'font-style': 'normal'}); 
     }); 
     } 
     return d; 
    }); 
    </script> 
</html>

Kann jemand bitte den Grund erklären, warum es nicht mit einem Arbeits Lösung?

Quelle

2016-08-14 Anmol Singh Jaggi

Das passiert, weil das <custom-tr>-Tag kein gültiges Element in Tabellen ist. Wie Sie in Ihrem Element-Inspektor sehen können, ersetzt der Browser stattdessen die Tags für gültige <tr> Tags. Weitere Informationen finden Sie unter this answer.

Was Sie tun können, ist Ihre benutzerdefinierte tr-attribute. Der Browser wird es dann als gültigen TR rendern, aber verwenden Sie Ihre benutzerdefinierte Direktive als ein Attribut, um das Styling zu ersetzen.

Siehe den folgenden Code als Referenz:

// Make sure you define the directive correctly, (note the customTr vs custom-tr) 
m1.directive('customTr', function()...... 

// Use your directive as an attribute 
d.restrict = 'A';

Und für die HTML, verwenden Sie das neu definierte Attribut mit gültigen tr-Tags.

<table> 
    <tr custom-tr> 
    <td>Hello</td> 
    </tr> 
    <tr custom-tr> 
    <td>Hi</td> 
    </tr> 
    <tr custom-tr> 
    <td>Bye</td> 
    </tr> 
</table>

Quelle

2016-08-14 15:10:05 Matthijs

Dank! Es klappt! –

Super! Happy Coding :) – Matthijs

Übrigens, gibt es eine Möglichkeit, das CSS des Elements in einem Objekt zu speichern, so dass ich das CSS in den ursprünglichen Zustand des 'mouseleave'-Ereignisses zurückversetzen kann? –

Sie können eine Vorlage für Ihre Richtlinie definieren und setzen <tr> und <td> Tag in. Sie können auch einen Bereich definieren, der den Inhalt td an die Direktive übergibt. so was.

var m1 = angular.module("m1", []); 
 
m1.directive('customTr', function() 
 
    { 
 
     var d={}; 
 
     d.restrict = 'E'; 
 
     d.scope = { content:"@"} 
 
     d.link = function(scope, element, attr) 
 
     { 
 
     element.bind('mouseenter', function(){ 
 
      element.css({'font-style': 'italic'}); 
 
     }); 
 
     element.bind('mouseleave', function(){ 
 
      element.css({'font-style': 'normal'}); 
 
     }); 
 
     } 
 
     d.template = '<tr ><td>{{content}}</td></tr>'; 
 
     return d; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="m1"> 
 
    <table> 
 
     <custom-tr content="Hello"></custom-tr> 
 
     
 
    </table> 
 
    </div>

Quelle

2016-08-14 15:10:54

Ich möchte nicht die innere html des '' als ein 'content' Attribut zur Verfügung stellen, wie Sie gezeigt haben. Ich möchte einfach '' durch ein benutzerdefiniertes Element ersetzen, das sich genau wie normal '' verhält, aber einen Unterschied im CSS bei Mausereignissen hat. –

Tabellenzeile benutzerdefinierte Richtlinie nicht funktioniert

Antwort

Verwandte Themen