Ketan's response is accurate, and I would like to ask why you are interested in obtaining the child elements? Generally, manipulating HTML directly from a controller is not recommended. Instead, it is advisable to update the data within your $scope, which will automatically reflect changes on your page. In a typical controller scenario, we focus on the scope's data rather than individual elements.
For instance, in a basic example where the textarea gets updated upon button click, another div is displayed, and an item is added to an array, using jQuery would involve DOM manipulation via JavaScript with methods like $(el).val()
and $(el).find()
. However, in an Angular controller, the emphasis is placed on data manipulation:
Example: http://plnkr.co/edit/aL6p09DrQsUotu7vnceZ
app.controller('MainCtrl', function($scope) {
$scope.message = "Some data";
$scope.testMethod = function() {
$scope.items.stuff.push($scope.message);
$scope.clicked = true;
$scope.message = $scope.message + ' you clicked me.';
}
$scope.items = {stuff:['one', 'two', 'three'],id:1,name:'yeah'}
});
<body ng-controller="MainCtrl">
<div id="container" ng-form>
<textarea name="message" ng-model="message"></textarea>
<button value="send" ng-click="testMethod()">Send</button>
</div>
<div ng-show="clicked">
I was clicked
</div>
<h2>{{items.name}}</h2>
<div ng-repeat='item in items.stuff'>
{{item}}
</div>
</body>
In the above example, the focus is on controlling the data, as manipulating elements on the page involves directives in Angular. Without specific details on your objective (such as retrieving form input values), it is challenging to provide tailored guidance for this particular issue.