angularjs - 如何使用 angular.element find 函数通过 JQuery 选择器进行搜索？

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('');
    })

});

经过上述测试，为什么我无法通过 JQuery 选择器搜索元素？我知道 limitations在 find() 方法的文档中。但是，我已经检查了 angularUI 项目检查了 find() 函数的用法，如here

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

并发现这些人正在使用 find 通过 jQuery 选举器来搜索元素，而不仅仅是标签名称，而我无法这样做。我错过了什么吗？

Answer 1

这是因为 Angular 中内置的 jqLit​​e 对 CSS 选择器的支持有限。但是，如果您在包含 Angular 之前将 jQuery 包含在脚本标记中，Angular 将看到这一点并使用 jQuery 而不是 jqLit​​e 来调用 angular.element()。