Find elements in JQLite

Question

I would like to access the div of class "dialog" 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 person's question (AngularJS: How to .find using jqLite?) I tried using angular.element(elem.querySelector('.dialog')) but I'm not sure what elem is supposed to be. I also tried using

var body = element.find('body')
var dialog = body.children().eq(0);

but that didn't seem to work either.

My HTML code is here; it is linked 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's 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!

score 2 · Accepted Answer · answered Jul 24 '15 at 19:01

You have element object in linking function, which is a jqLite instance of the element directive is bound to. To be able to use native browser DOM methods you need to use pure HTMLElement object which you can extract from jqLite by its index.

So you should use element in 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');
};

Find elements in JQLite

1 Answers1