How to use angular.element find function to search by JQuery selector ?

Question

describe("create a simple directive", function () {


    var simpleModule = angular.module("directivesSample", []);


    simpleModule.controller('Ctrl2', function ($scope) {
        $scope.format = 'M/d/yy h:mm:ss a';
    });

    simpleModule.directive("myCurrentTime", function ($timeout, dateFilter) {

        return function (scope, element, attr) {
            var format;
            var timeoutId;

            function updateTime() {
                element.text(dateFilter(new Date(), format));
            }

            scope.$watch(attr.myCurrentTime, function (value) {
                format = value;
                updateTime();
            });
            function updateLater() {
                timeoutId = $timeout(function () {
                    updateTime();
                    updateLater();

                }, 1000);
            }

            element.bind('$destroy', function () {
                $timeout.cancel(timeoutId);
            });
            updateLater();
        }


    });


    beforeEach(module('directivesSample'));

    var element = angular.element(

        '<div ng-controller="Ctrl2">Date format:<input ng-model="format"> ' +
            '<hr/>Current time is: ' +
            '<span class="timeout" my-current-time="format" id="timeout-render"></span>' +
            '</div>');

    var directiveScope;
    var scope;
    var linkedElement;
    var linkFunction;

    beforeEach(inject(function ($rootScope, $compile) {
        scope = $rootScope.$new();
        linkFunction = $compile(element);
        linkedElement = linkFunction(scope);
        scope.$apply();
    }));

    it("should define element time out", function () {

    var angularElement = element.find('span'); // <-- element is not returned if set to   var angularElement = element.find('.timeout'); or var angularElement = element.find('#timeout-render'); 

        console.log(angularElement.text());
        expect(angularElement.text()).not.toBe('');
    })

});

Having the above test, why am I unable to search for element by JQuery selector ? I am aware of the limitations in the documentation of find() method.But, I have checked out the angularUI project inspected the the usage of find() function as in here

 var tt = angular.element(elm.find("li > span")[0]);

and find out that the guys are using find to search element by jQuery elector not only tag name while I am not able to do so. Am I missing something ?

Anders Ekdahl · Accepted Answer · 2013-02-26 14:45:43Z

5

That's because the built in jqLite in Angular has only limited support for CSS selectors. But if you include jQuery in a script tag before you include Angular, Angular will see that and use jQuery instead of its jqLite for calls to angular.element().

answered Feb 26, 2013 at 14:45

Anders Ekdahl

23k4 gold badges73 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Adelin Over a year ago

I have included jQuery in testacular.conf.js ( I guess this where I should include it ) and still not working !

Adelin Over a year ago

However, your answer seems reasonable !

Kenneth Lynne Over a year ago

You must include it explicitly before your tests to evade race conditions.

Collectives™ on Stack Overflow

How to use angular.element find function to search by JQuery selector ?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related