Question

我正在将Angularjs用于Web应用程序。我试图找到解决问题的方法，似乎Angularjs不方便在ng-Repeat中访问新创建的DOM元素。

我准备了一个jsfiddle来显示实际问题。这是链接：http://jsfiddle.net/ADukg/956/

请告诉我如何在ng-repeat中选择新的DOM元素。

Answer 1

为了扩展我的评论，我更新了你的小提示，以显示一个警告元素类的指令的简单实现。

http://jsfiddle.net/ADukg/994/

原始评论：

关于控制器中的dom操作，它says here你根本不应该这样做。它应该在一个指令中。控制器应该只包含业务逻辑。

为什么它不起作用，我不知道，但这可能是因为角度在这个时间点仍在运行它自己的东西。

Answer 2

有两种方法可以做到这一点：

1 ng-init

function controller($scope) {
  $scope.items = [{id: 1, name: 'one'}, {id: 2, name: 'two'}];

  $scope.initRepeaterItem(index, item) {
    console.log('new repeater item at index '+index+':', item);
  }
}

<ul>
  <li ng-repeat="item in items" ng-init="initRepeaterItem($index, item)"></li>
</ul>

2 MutationObserver 稍微复杂
在指令中，在父元素获取新子元素的元素（在这种情况下为<ul>）

中执行此操作

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // you get notified about DOM mutations here
    // check mutation.type if it was an insertion
    console.log(mutation.target.nodeName, mutation.type, mutation);
  });
});

var config = {childList: true, attributes: false, characterData: false, 
  subtree: false, attributeOldValue: false, characterDataOldValue: false};

observer.observe(element[0], config);

Demo              http://plnkr.co/h6kTtq
Documentation     https://developer.mozilla.org/en/docs/Web/API/MutationObserver
Browser support   http://caniuse.com/mutationobserver

选择Angularjs ng-repeat创建的新DOM元素

2 个答案: