Question

我有一组元素，点击时需要将dom元素附加到最近的类data-here而不是单击的元素。我怎么做到的？是否有类似于.closest()的方法才能使其正常工作。这是示例plunker代码 - ＆gt; http://plnkr.co/edit/6VQwGcpX7zsjDSGc3mHp?p=preview

 <div ng-repeat="n in [5, 4, 3, 2, 1] " style="border:solid 1px;" ng-click="clickme($event)">
         Click me!
      <div class="user">User
        <div class="chata">
          Chat Data
        </div>
        </div>
      <div class="wresponse">Response Data </div>
      <div class="data-here" style="border:solid 1px;">
        Append Here
      </div>
      <br/>
    </div>

Answer 1

Don't manipulate the DOM in a controller! 它违反了AngularJS作为应用框架的整个要点。

我是这样做的。

对附加的元素列表使用ng-repeat结构。它会从空开始。
使用指令或控制器函数来处理click事件。单击时添加到视图模型，这将自动更新视图（以及您的ng-repeat结构）。

这是一个例子。

<div ng-repeat="thing in ctrl.things track by $index" 
  ng-click="ctrl.clickme(thing, $index+1)">
    <button>Click me!</button>

    <div class="user">User
      <div class="chata">
        Chat Data
      </div>
    </div>

    <div class="wresponse">Response Data </div>

    <div ng-repeat="word in thing.words track by $index">
      {{thing.words[$index]}}
    </div>
</div>

app.controller('MainCtrl', function() {
  var ctrl = this;
  ctrl.name = 'World';
  ctrl.things = [{
    words: ["thing one's word"]
  }, {
    words: ["thing two's word"]
  }, {
    words: ["thing three's word"]
  }];

  ctrl.clickme = function(thing, i) {
    thing.words.push('another thing ' + i + ' word');
  };
});

Plunker demo

没有DOM操作！

请注意，我在此示例中使用了track by $index来处理重复结构中的重复项。

另外，请查看使用controllerAs syntax。它简化了与范围有关的一些事情。

如果您绝对必须操纵DOM，请在custom directive中进行操作。这样可以保持控制器清洁，只执行控制器应该执行的操作，即更新视图模型。

在ng-click上添加一个dom元素到特定的类

1 个答案: