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() メソッドのドキュメントの制限を認識しています.しかし、私はここのように find() 関数の使用法を検査した angularUI プロジェクトをチェックアウトしました 

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

そして、私がそうすることができないのに、タグ名だけでなくjQueryエレクターで要素を検索するために、みんながfindを使用していることを見つけます。何か不足していますか？

4

1 に答える 1

5

これは、Angular に組み込まれている jqLit​​e が CSS セレクターのサポートを制限しているためです。ただし、Angular を含める前にスクリプト タグに jQuery を含めると、Angular はそれを認識し、angular.element() の呼び出しに jqLit​​e の代わりに jQuery を使用します。

于 2013-02-26T14:45:43.243 に答える