Find items in JQLite
I would like to access a div from the "dialog" class as a JQLite element in an angular directive. I cannot use element.find('div')
because I have another div in the template.
As per this human question ( AngularJS: How with jqLite? ) I tried to use
angular.element(elem.querySelector('.dialog'))
but I'm not sure what it should be elem
. I have also tried using
var body = element.find('body')
var dialog = body.children().eq(0);
but that didn't work either.
My HTML code is here; it is related to the template as templateUrl
:
<body>
<div class='dialog' ng-style="{'width': model.width+'px', 'height': model.height+'px', 'top':model.top+'px', 'left':model.left+'px', 'z-index': model.zindex}"
ng-mousedown='zorder()'>
<span class='topbar'>
<button id='minimize' ng-click="minimize()"> _ </button>
</span>
<div>
<ng-include src=model.template></ng-include>
</div>
<span class='drag'></span>
</div>
</body>
Here is the basic structure of my directive code:
angular.module('root', [])
.controller('index', ['$scope', function($scope){
$scope.dialogs = [
{
minimized: false,
width: 200,
height: 300,
top: 5,
left: 5,
zindex: 1,
template: 'experiment-dialog.html'
}]
}])
.directive('makeDialog', function($document) {
return {
restrict: 'E',
scope: {
model: '=',
dialogs: '='
},
templateUrl: 'dialog.html',
link: function(scope, element, attrs) {
//jqlite elements
var dialog = angular.element(elem.querySelector('.dialog'));
var topBar = dialog.children().eq(0);
var drag = dialog.children().eq(2);
dialog.css('border', 'solid purple') //fails to give dialog elements purple border
};
});
Any help would be greatly appreciated. Let me know if you need more information!
source to share
You have an object element
in a bind function to which the jqLite instance of the element directive is bound. To be able to use native browser DOM methods, you need to use a pure HTMLElement object that you can retrieve from jqLite by its index.
So you have to use element
in the link function like this:
link: function (scope, element, attrs) {
var dialog = angular.element(element[0].querySelector('.dialog'));
var topBar = dialog.children().eq(0);
var drag = dialog.children().eq(2);
dialog.css('border', 'solid purple');
};
source to share