Question

看看这个JSFiddle： http://jsfiddle.net/acajic/DGpCc/1/

HTML：

<div ng-app="myApp">
<div ng-controller="ctrl">
    <interactive-table row-selected="onRowClickFunction">
        <table style="border: 1px solid black;">
            <tr ng-repeat="user in users">
                <td>{{user.name}}</td>
                <td>{{user.points}}</td>
            </tr>
            <tr>
                <td>Peter</td>
                <td>154</td>
            </tr>
            <tr>
                <td>Dan</td>
                <td>141</td>
            </tr>
        </table>
    </interactive-table>
</div>

模块，控制器，指令：

var app = angular.module('myApp', []);

app.controller('ctrl', function ($scope) {
  "use strict";

  $scope.users = [{
      name: "Jane",
      points: 152
  }, {
      name: "Robert",
      points: 171
  }, {
      name: "Valerie",
      points: 163
  }];

  $scope.onRowClickFunction = function (name) {
      alert(name);
  };
});
app.directive('interactiveTable', function () {
  "use strict";
  return {
    restrict: 'E',
    scope: {
      rowSelected: '='
    },
    template: '<div ng-transclude></div>',
    transclude: true,
    link: function (scope, element, attrs) {
      console.log(element); // EDIT #1: inserted

      $(element).find("tr").click(function () {
        alert("bravo");
        //scope.rowSelected("jakost");
      });
    }
  };
});

我称之为“互动表”。它应该是一个允许行选择的表，在选择行时通知您并更改所选行的样式。

这是否是创建交互式表格的最佳方法无关紧要。我想了解更多关于指令的信息。

这个JSFiddle的问题：

1）只有静态行（Peter＆amp; Dan）才会响应点击事件。如何在生成的行上放置点击侦听器（Jane，Robert，Valerie）？

2）目前，我必须使用 interactive-table 标记包装 table 标记。如果我能将表标记为“交互式”，那就太棒了。

3）最后，是否有更好的方法可以让一个简单的表元素在选择某些行或元素时通知您，这将改变所选行的样式等。此外，是否有一些简单的AngularJS指令可供下载？你有什么收藏吗？

编辑＃1：

在指令代码中添加了console.log（element）。它打印出具有innerHTML属性的DOM元素，如下所示：

<div ng-transclude="">
            <table style="border: 1px solid black;" class="ng-scope">
                <tbody><!-- ngRepeat: user in users --><tr ng-repeat="user in users" class="ng-scope">
                    <td class="ng-binding">Jane</td>
                    <td class="ng-binding">152</td>
                </tr><!-- end ngRepeat: user in users --><tr ng-repeat="user in users" class="ng-scope">
                    <td class="ng-binding">Robert</td>
                    <td class="ng-binding">171</td>
                </tr><!-- end ngRepeat: user in users --><tr ng-repeat="user in users" class="ng-scope">
                    <td class="ng-binding">Valerie</td>
                    <td class="ng-binding">163</td>
                </tr><!-- end ngRepeat: user in users -->
                <tr>
                    <td>Peter</td>
                    <td>154</td>
                </tr>
                <tr>
                    <td>Dan</td>
                    <td>141</td>
                </tr>
            </tbody></table>
        </div>

我认为在配置点击处理程序时没有生成前三行。这个结果对我来说很困惑，因为打印的DOM元素清楚地表明它在设置.click处理程序之前有5行。但我不想进入那个。

你建议我把ng-click放在哪里？在 tr 标签上？这样做的全部目的是我在指令中有未改变的html代码，并且指令ALONE在指令的内容中添加了行为。

Answer 1

1）当您使用$(element).find("tr")附加事件侦听器时，<tr>不是由角度生成的。您可以尝试jQuery委托事件处理程序或ng-click（更推荐）

2）您只需要将指令设置为表上的属性，并将restrict设置为包含A（属性）

restrict: 'EA'

3）如果选择了行，您可以使用scope.$emit通知。

Updated fiddle.

如果您需要绑定功能，请尝试：

row-selected="onRowClickFunction(name)"

并称之为：

scope.rowSelected({name:"abc"});

DEMO

AngularJS指令转换

1 个答案: