在模板中選擇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>

然后我想在每個模板范圍內選擇所有具有class="content"的元素，以便對其進行操作。 如何使用JS實現此目的？

編輯：

柱塞

在此壓板機中，console.log應該兩次打印“ 1”，然后在第二次加載模板時打印“ 1”，然后打印“ 2”

Answer 1

經過更多說明后，這是一個有效的示例：

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;
            }
          });
        }
  }]);

Answer 2

大多數時候，您不想在Angularjs中進行DOM操作，而是使用控制器來掛接到事件。 如果必須在AngularJS中進行DOM操作，則可以使用指令
有關創建可操縱DOM的指令的文檔

然后，您可以使用link函數來獲取指令元素的子級

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

https://stackoverflow.com/a/17329630/2033671