Select DOM 模板中的元素

Question

我在同一页面上多次调用了这个模板：

<div ng-controller="templateController">
      <div class="source">
        <div ng-repeat="item in info">
            <div class="content" data-value="{{item.ID}}">{{item.name}}</div>
        </div>
    </div>
    <br style="clear:both" />
    <div class="receiver"></div>

</div>

然后我想 select 每个模板范围内具有 class="content" 的所有元素以便操作它们。我如何使用 JS 实现此目的？

编辑：

Plunker

在此 planker 中，console.log 应打印两次“1”，并在第二次加载模板时打印“1”和“2”

Answer 1

大多数时候您不想在 Angularjs 中进行 DOM 操作，而是使用您的控制器挂接事件。如果你必须在 AngularJS 中进行 DOM 操作，你将使用指令
Docs on Creating a Directive that Manipulates the DOM

然后您可以使用 link 函数获取指令元素的子元素

function link(scope, element, attrs) {
    var content = angular.element(element[0].querySelector('.content'));
}

Answer 2

经过更多解释这里是一个工作示例：

https://plnkr.co/edit/n5GOd6MDLyvG4ZAsuLvf?p=preview

主要思想是创建 2 个列表并遍历这两个列表，并在单击时在它们之间移动数据。

angular.module("demo", []);

angular
  .module("demo")
  .controller("demoController", ["$scope", function($scope) {

  }]);

angular
  .module("demo")
  .controller("templateController", ["$scope", "$timeout", function($scope, $timeout) {
            $scope.sourceList = [
            {
                name: "john",
                ID: 1
            },
            {
                name: "Edward",
                ID: 0
            },
            {
                name: "Carl",
                ID: 2
            }
        ];

        $scope.receiverList = [
            {
                name: "Bob",
                ID: 1
            }
        ];

        $scope.moveToReceiver = function(item){
          $scope.receiverList.push(item);

          $.each($scope.sourceList, function(i){
            if($scope.sourceList[i].name == item.name){
              $scope.sourceList.splice(i, 1);
              return false;
            }
          });
        }
  }]);

Select DOM 模板中的元素

Select DOM elements within template

javascript

angularjs

angularjs-scope