6

まず、それがとんでもないタイトルであることは知っています。

私は最近angular-tooltipを引き継いで、メインの作業プロジェクト用のカスタム ツールチップを作成しようとしています。

私のプロジェクトには、単に言う ng-repeat ディレクティブがあります

<div class="row-submenu-white" ng-repeat="merge in potentialMerges | limitTo: numPotentialMergesVisible" company-profile-tooltip="merge.preview"></div>

ライブラリの手順を使用して、カスタム ツールチップ ディレクティブを定義しました。

myApp.directive('companyProfileTooltip', ['$tooltip', ($tooltip) => {
    return {
        restrict: 'EA',
        scope: { profile: '@companyProfileTooltip' },
        link: (scope: ng.IScope, elem) => {
            var tooltip = $tooltip({
                target: elem,
                scope: scope,
                templateUrl: "/App/Private/Content/Common/company.profile.html",
                tether: {
                    attachment: 'middle right',
                    targetAttachment: 'middle left',
                    offset: '0 10px'
                }
            });

            $(elem).hover(() => {
               tooltip.open();
           }, () => {
                tooltip.close();
           });
        }
    };
}]);

Company.profile.html は次のとおりです。

<div>Hello, world!</div>

気がつけば、ng-repeat にはlimitToフィルターがあります。これら (最初は 3 つ) のそれぞれについて、マージは完全に機能し、<div>Hello, world!</div>ツールチップが適切に追加されます。

limitTo次に、より大きな数に制限するようにトリガーします。最初の 3 の後に要素が繰り返されるたびに、次のエラーが発生します。

TypeError: context is undefined


if ( ( context.ownerDocument || context ) !== document ) {

エラーは jquery-2.1.1.js にあり、デバッグがどうしようもなく頭を悩ませているようです。

私が言えることは、その行に対して呼び出されている関数は

Sizzle.contains = function( context, elem ) {
    // Set document vars if needed
    if ( ( context.ownerDocument || context ) !== document ) {
        setDocument( context );
    }
    return contains( context, elem );
};

の呼び出しスタックで

Sizzle</Sizzle.contains(context=Document 046f7364-fa8d-4e95-e131-fa26ae78d108, elem=div)jquery-2.1.1.js (line 1409)
.buildFragment(elems=["<div>\r\n Hello, world!\r\n</div>"], context=Document 046f7364-fa8d-4e95-e131-fa26ae78d108, scripts=false, selection=undefined)jquery-2.1.1.js (line 5123)
jQuery.parseHTML(data="<div>\r\n Hello, world!\r\n</div>", context=Document 046f7364-fa8d-4e95-e131-fa26ae78d108, keepScripts=true)jquery-2.1.1.js (line 8810)
jQuery.fn.init(selector="<div>\r\n Hello, world!\r\n</div>\r\n", context=undefined, rootjQuery=undefined)jquery-....2.1.js (line 221)
jQuery(selector="<div>\r\n Hello, world!\r\n</div>\r\n", context=undefined)jquery-2.1.1.js (line 76)
compile($compileNodes="<div>\r\n Hello, world!\r\n</div>\r\n", transcludeFn=undefined, maxPriority=undefined, ignoreDirective=undefined, previousCompileContext=undefined)angular.js (line 6812)
m()angular....min.js (line 2)
.link/<()app.js (line 262)
jQuery.event.special[orig].handle(event=Object { originalEvent=Event mouseover, type="mouseenter", timeStamp=0, more...})jquery-2.1.1.js (line 4739)
jQuery.event.dispatch(event=Object { originalEvent=Event mouseover, type="mouseenter", timeStamp=0, more...})jquery-2.1.1.js (line 4408)
jQuery.event.add/elemData.handle(e=mouseover clientX=980, clientY=403)jquery-2.1.1.js (line 4095)

App.js の 262 行目は、上記のディレクティブのリンク関数です。

limitTo私の人生では、イニシャルが増加した後に繰り返される要素でコンテキストが未定義になる理由を理解できません。私が確認できることは、limitToフィルターを削除すると、各要素全体で動作が正常になることです。私が確認できることは、初期limitTo値を 0 に設定し、後でそれを増やすと、最初の 3 つの要素が機能しないことです。

のソースコードを見ると、limitTo制限している量が変更されるたびに新しい配列が構築されると思います。私の理解では、これによりangularがすべてのDOM要素を削除してから変更する必要がありますが、その変更がこれに何らかの影響を与えるかどうかはわかりません。

作業することはあまりないことはわかっていますが、これをデバッグする方法がわからず、助けをいただければ幸いです。または、ng-repeat に、これを説明できることに気付いていない動作がある場合。

4

2 に答える 2

0

どうやら、Angular-tooltip ライブラリに間違ったデータがキャッシュされていたことが問題だったようです。テンプレートのコンテンツだけでなく、テンプレートのリクエスト全体が解析されていました。この問題は ngRepeat とは何の関係もありませんでした。テンプレート データがまだ templateCache に入力されていないため、limitTo の前の最初の n 個の項目が GET 要求を開始しますが、後で要求全体のコンテンツにアクセスしようとします。

于 2014-11-14T00:41:14.880 に答える