角材を使用してngAriaを無効にする

Question

私はngAriaと$ariaProviderの問題を抱えています（おそらく）SharePoint 2013でホストされているAngularアプリケーションを開発しています。

<md-dialog>要素をモーダルとして開くリンクをクリックすると、UIスレッドが〜30-40秒間ロックされるという問題があります。デバッグを通じて、私はwalkDOM(element)というAngular Material .jsに含まれている1つの方法までトレースすることができます。

アプリケーションはローカルで（SharePointなしで）正常に動作しますが、SharePoint環境内でハングします。私は、この方法はSharePointで横断するDOMツリーが開発中のものよりもはるかに大きいので問題であると思います。モーダルオープンイベントが発生すると、walkDOM()メソッドが起動され、ほとんどのDOM要素にaria-hidden="true"の値が追加されます。 SharePointが持つ複雑なDOM構造のため、これはハングアップの原因と考えています。私はデバッグし、ブレークポイントを連続的に発射することができます。また、属性がハングアップ後に追加されていて、事前には存在しないこともわかります。

私はこのトラバーサルを無効にしたいと思いますが、これまで受け入れられている方法はありませんでした。私はこのスレッドに従って、私が興味を持っている方法にアクセスできないかもしれないことを認識しました：https://github.com/angular/material/issues/600。私はAriaを無効にすることは悪い習慣であると理解していますが、DOMのトラバーサルを防ぎ、UIスレッドがこのような長い間ロックされないようにしようとしています。私は角度のアプリ（：How do I disable ngAria in ngMaterial?後者スニペットは、このスレッドで提案）：のためのアリアコンポーネントを設定/上書きするために、次のコードを試してみました

angular 
.module('app', ['ui.router', 'ngMaterial', 'ngAria']) 
... 
.config(function ($ariaProvider) { 
    $ariaProvider.config({ 
    ariaValue: true, 
    ariaHidden: false, 
    tabindex: false 
    }); 
}) 
.decorator('$mdAria', function mdAriaDecorator($delegate) { 
    $delegate.expect = angular.noop; 
    $delegate.expectAsync = angular.noop; 
    $delegate.expectWithText = angular.noop; 
    return $delegate; 
}); 

を、私は私がやろうとしています何ができる方法はありますか？可能であれば、モーダルを使用しないようにアプリケーションを書き直さないでください。私はグローバルなwalkDOM()メソッドを書くことを考えましたが、ほとんど成功しませんでした。

ご協力いただければ幸いです。ありがとう！

EDIT：これはaria属性はDOM構造とwalkDOM()方法が動作する方法に追加される方法に問題があります。これは、この質問で扱われるルーティング/モデルの状態管理とは関係ありません。How to prevent view redraw when changing route in AngularJS。

Answer 1

walkDOM内のparentNode属性チェックをインターセプトするゲッターを使用します。例えば、上記文脈において

function getter() 
 
    { 
 
    return document.documentElement; 
 
    } 
 

 
function isNodeOneOf(elem, nodeTypeArray) 
 
    { 
 
    if (nodeTypeArray.indexOf(elem.nodeName) !== -1) 
 
    { 
 
    return true; 
 
    } 
 
    } 
 

 
function walkDOM(element) 
 
    { 
 
    var isHidden; 
 
    var children = element.parentNode.children; 
 

 
    console.log(Date() + element.innerText); 
 
    
 
    while (element.parentNode) 
 
    { 
 
    if (element === document.body) 
 
     { 
 
     console.log(Date()); 
 
     return; 
 
     } 
 
    
 
    
 
    for (var i = 0; i < children.length; i++) 
 
     { 
 
     console.log(Date()); 
 
    // skip over child if it is an ascendant of the dialog 
 
    // or a script or style tag 
 
     if (element !== children[i] && 
 
     !isNodeOneOf(children[i], ['SCRIPT', 'STYLE']) 
 
     ) 
 
     { 
 
     children[i].setAttribute('aria-hidden', isHidden); 
 
     } 
 
     } 
 

 
    walkDOM(element = element.parentNode); 
 
    } 
 
    } 
 

 
Object.defineProperty(HTMLElement.prototype, 'parentNode', 
 
         { get: getter }); 
 

 
walkDOM(document.getElementById("foo"));

<section> 
 
    <p> 
 
    <span> 
 
     <a> 
 
     <strong> 
 
      <span id="foo">Hi</span> 
 
     </strong> 
 
     </a> 
 
    </span> 
 
    </p> 
 
</section>

、getterである：

ないゲッターがない場合プロパティのゲッター、または未定義として機能する機能。関数の戻り値は、プロパティの値として使用されます。

参照

• MDN: HTMLTitleElement

• MDN: Object.defineProperty()

• angular material source: components - dialog | dialog.js

• Mutable DOM Prototypes Demo

• WebIDL Github Repo

• debugInfoEnabled for Angular 1.2