AngularJS: 在指令中操作ng-repeat元素的DOM

Question

我是AngularJS的新手。我正在尝试实现一个简单的功能，其中有多个复选框选项，并且在单击这些复选框选项时需要调用一个特定的函数，类似于：

 $(parentDiv).on("click",'input[type="checkbox"]', functionToBeCalled});

我正在尝试使用一个指令来处理这个部分，内容类似于：

 <div>
    <span ng-repeat="subsection in section"><input type="checkbox"  value="subsection.name"></input> {{subsection.name}} </span>
</div>

目录

app.directive('myDir', function() {
  return {
    restrict: 'AE',
    replace: true,
    templateUrl: 'filter.html',
    link: function(scope, elem, attrs) {
      elem.find("input").bind('click', function() {
        //do some data manipulation
      });
    });
 };
});

当我使用链接函数时，我发现如果我使用elem.find('input[type="checkbox"])会得到一个空对象，因此在此之前未被编译。请告诉我如何解决这种情况。我做了一些研究，发现了编译函数，它在链接之前操作DOM，但我无法想出接下来的方法。任何帮助将不胜感激。谢谢。

- user1776573

Answer 1

使用ngClick或ngChange指令在angularjs中。

<div>
    <span ng-repeat="subsection in section">
    <input type="checkbox"  value="subsection.name" ng-click="myFunc(subsection.name)" /> {{filter.name}} </span>
</div>

在这个例子中，我使用了ng-click = "myFunc"并且将值传递给该函数。

- Sudharsan S

---

问题是我有十个这样的部分，每个部分都有超过五个复选框，点击复选框时会执行相同的函数。我不想在所有十个部分上使用ng-click。我想知道是否可能有一个通用的解决方案来解决这个问题。 - user1776573

我觉得我没有清楚地表达我的意思。请参考下面的fiddle链接http://jsfiddle.net/uidev_26/cmbj92c1/4/。我想做的就是只调用一次函数，而不是为每个部分都调用。 - user1776573

Answer 2

了解您的指令长什么样子，以及该指令附加到哪个元素可能会有所帮助，因为您提到了elem。

不过，如果您只需要在单击复选框时调用函数，可以使用内置的Angular函数：

• ngChange
• ngClick

- Dan Moldovan

---

已添加相同的内容。我正在使用类似于<div mydir></div>的东西。 - user1776573