I am having trouble with angularjs directives finding child dome elements with the injected angular.element.
For example I have a directive like so:
myApp.directive('test', function () {
return {
restrict: "A",
link: function (scope, elm, attr) {
var look = elm.find('#findme');
elm.addClass("addedClass");
console.log(look);
}
};
});
and HTML such as :
<div ng-app="myApp">
<div test>TEST Div
<div id="findme"></div>
</div>
</div>
I have access to the element which is proffed by adding a class to it. However attempting to access a child element produces an empty array in the var look.
The jsfiddle is here http://jsfiddle.net/raygarner/FZGKA/7/ .
Why is something so trivial not working properly?
From the docs on angular.element:
find()- Limited to lookups by tag name
So if you're not using jQuery with Angular, but relying upon its jqlite implementation, you can't do elm.find('#someid').
You do have access to children(), contents(), and data() implementations, so you can usually find a way around it.
Before the days of jQuery you would use:
document.getElementById('findmebyid');
If this one line will save you an entire jQuery library, it might be worth while using it instead.
For those concerned about performance: Beginning your selector with an ID is always best as it uses native function document.getElementById.
// Fast:
$( "#container div.robotarm" );
// Super-fast:
$( "#container" ).find( "div.robotarm" );
I used
elm.children('.class-name-or-whatever')
to get children of the current element
find() - Limited to lookups by tag name you can see more information https://docs.angularjs.org/api/ng/function/angular.element
also you can access by name or id or call please followin example
angular.element(document.querySelector('#txtName')).attr('class', 'error');
Add jQuery to your app and then use -
$(elm).find('#findme');
instead of -
elm.find('#findme');
You can easily solve that in 2 steps:
1- Reach the child element using querySelector like that:
var target = element[0].querySelector('tbody tr:first-child td')
2- Transform it to an angular.element object again by doing:
var targetElement = angular.element(target)
You will then have access to all expected methods on the targetElement variable.
You can do it like this:
var myApp = angular.module('myApp', [])
.controller('Ctrl', ['$scope', function($scope) {
$scope.aaa = 3432
}])
.directive('test', function () {
return {
link: function (scope, elm, attr) {
var look = elm.children('#findme').addClass("addedclass");
console.log(look);
}
};
});
<div ng-app="myApp" ng-controller="Ctrl">
<div test>TEST Div
<div id="findme">{{aaa}}</div>
</div>
</div>