Question

我想通过创建自定义指令来更改<tr>和mouseenter事件上的表行mouseleave的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>

有人可以解释为什么它不使用解决方案吗？

Answer 1

这是因为<custom-tr>标记不是表中的有效元素。正如您在元素检查器中看到的那样，浏览器将替换有效<tr>标记的标记。有关详细信息，请参阅this answer。

您可以做的是将自定义设为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>

Answer 2

您可以为指令定义模板，并将<tr>和<td>标记放入其中。您还可以定义范围以将td内容传递给指令。像这样。

＆＃13;

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

＆＃13;

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

＆＃13;

表行自定义指令不起作用

2 个答案: