带有自定义指令的表格行答案

【问题标题】：Table row with custom directive带有自定义指令的表格行
【发布时间】：2016-12-20 23:16:08
【问题描述】：

我想通过创建自定义指令来更改 mouseenter 和 mouseleave 事件上的表格行 <tr> 的 CSS：

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

谁能解释为什么它不能使用解决方案？

【问题讨论】：

标签： javascript angularjs html-table angularjs-directive dom-events

【解决方案1】：

您可以为您的指令定义一个模板并将<tr> 和<td> 标签放入。您也可以定义一个范围以将td 内容传递给指令。像这样。

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>

【讨论】：

我不想提供 <custom-tr> 的内部 html 作为 content 属性，如您所示。我只想用一个自定义元素替换<tr>，它的行为就像普通的<tr>，但鼠标事件的CSS有所不同。

【解决方案2】：

发生这种情况是因为<custom-tr> 标记不是表格内的有效元素。正如您在元素检查器中看到的那样，浏览器会将标签替换为有效的<tr> 标签。请参阅this answer 了解更多信息。

您可以做的就是将您的 custom-tr 设为attribute。然后浏览器会将其呈现为有效的 TR，但使用您的自定义指令作为属性来替换样式。

参考以下代码：

// 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';

对于 HTML，使用新定义的属性和有效的 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>

【讨论】：

太棒了！快乐编码:)
顺便问一下，有没有办法将元素的 CSS 保存在某个对象中，以便我可以在 mouseleave 事件上将 CSS 恢复到原始状态？
元素的样式存储在元素本身中。您可以通过element.style.xxxxx 轻松访问它。
我尝试使用element.style.color，但收到错误Uncaught TypeError: Cannot read property 'color' of undefined。
这可能有多种原因。我建议你打开一个新问题来解释这个问题。