I am having trouble with angularjs directives finding child DOM 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.
Why is something so trivial not working properly?
This question is related to
javascript
angularjs
angularjs-directive
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 following example:
angular.element(document.querySelector('#txtName')).attr('class', 'error');
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>
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.
If anyone is looking to grab the scope off of a 'controller as' element,.. something like this:
<div id="firstctrl" ng-controller="firstCtrl as vm">
use the following:
var vm = angular.element(document.querySelector('#firstctrl')).scope().vm;
I used
elm.children('.class-name-or-whatever')
to get children of the current element
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" );
Source: Stackoverflow.com