2
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 选择器搜索元素?我知道 find() 方法文档中的限制。但是,我已经检查了 angularUI 项目,检查了 find() 函数的用法,如下所示

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

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

4

1 回答 1

5

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

于 2013-02-26T14:45:43.243 回答