在模板中选择DOM元素

Question

There's this template that I call multiple times on the same page:

<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>

and then I want to select all the elements with class="content" within each template scope in order to manipulate them. How can I achieve this using JS?

EDIT :

Plunker

In this planker the console.log should print "1" twice and its printing "1" and then "2" when the template loads the second time

Answer 1

After more explanation here is a working example:

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

The main idea is creating 2 lists and iterating over both and just moving data around between them on click.

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

Most of the time you do not want to do DOM manipulation in Angularjs and instead hook into events with your controller. If you have to do DOM manipulation in AngularJS you would use directives
Docs on Creating a Directive that Manipulates the DOM

You could then use your link function to grab the children of your directive's element

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

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