使用webshimsは、私はまた、依存関係の管理のためのrequirejsを使用している角度アプリで<a href="https://github.com/aFarkas/webshim">webshims polyfill</a>を使用しようとしている角度アプリ

Question

にポリフィル。私はformアトリビュートがないことを、フォームフィールドにinputとbuttonのようにシムしようとしています。これは特定のボタンや入力がどのフォームに属しているかをブラウザに伝えます。 IE9にはこの機能がありません。

このポリフィルを使用する最良の方法は、フォームディレクティブを作成し、リンク機能内で$.webshims.polyfill('forms')を呼び出すことでした。

ディレクティブ

define(['angular', 'webshims'], function(angular) { 
    return angular.module('myApp').directive('form', ['$window', function($window) { 
    return { 
     restrict: 'E', 
     scope: false, 
     link: function($scope, iElement, iAttrs) { 
     if (!(window.Modernizr.input.placeholder || window.Modernizr.input.autofocus)) { 
      $.webshims.setOptions({ 
      waitReady: false 
      }); 
      $.webshims.polyfill('forms'); 
     } 
     } 
    }; 
    } 
]); 

は、ここで私はwebshimsが今ポリフィルロードてる方法です：

マイRequirejs設定

app: { 
    options: { 
    baseUrl: 'src/apps', 
    stubModules: ['cs'], 
    paths: { 
     jquery: '../public/components/jquery/jquery', 
     .... 
     angular: '../public/components/angular/angular', 
     .... 
     webshims: '../public/components/webshim/src/polyfiller', 
    }, 
    shim: { 
     angular: { 
     deps: ['jquery'], 
     exports: 'angular' 
     }, 
     ... 
     priority: ['angular'] 
    } 
    } 
} 

事はあっても、シムの負荷にもかかわらずである、とさえ呼び出します正しい機能は、シムは

HTML5フォーム（プレースホルダ、 フォーム属性など）を属性とIE9はまだ問題を抱えていると、動作していないようです

私はここで何が欠けていますか？

Answer 1

私は角を持つ経験がないので、「形」ディレクティブでこれを行うには、あなたのdescisionが正しいと天気を私は知りません（しかし、私はそれを疑います）。最初

しかし： 'polyfiller' という名前のAMDモジュールとしてpolyfillerファイルレジスタをwebshims。

webshims.setOptions({ 
    waitReady: false, 
    basePath: '../public/components/webshim/src/shims/' 
}); 

：あなたのあなたがポリフィルメソッドを呼び出すされる前に、あなたも正しくbasePathを設定する必要がある関数を定義するの内側

polyfiller: '../public/components/webshim/src/polyfiller', 

：polyfiller

define(['angular', 'polyfiller'], function(angular) 

とにあなたのwebshimsの名前を変更することが良いでしょう

さらにオートフォーカス、プレースホルダがIE10でサポートされていますが、フォームの属性は、IE11でさえサポートされていません。したがって、Modernizrテストを削除する必要があります。

それでは、あなたの現在の問題が何であるかを見てみましょう。

IE9のコンソールwebshims.isReady('forms')で次のコードを実行できますか？

trueの場合： フォームが用意できたら、IE9のコンソール$('body').updatePolyfill()で次のコードを実行します。 これは役に立ちますか？

がfalseの場合： それは真/偽またはundefinedを返すんあなたのIE9のコンソールwebshims.modules["form-core"].loaded

に次のコードを実行します。

未定義/偽を返した場合： a）webshims.polyfill（ 'forms'）;実際に呼び出され、b）ネットワークエラーはありません - >ファイルは404を使わずにロードされます。上記のbasePath設定も参照してください。

---

webshimsのロードと実行についての何か：

通常、アプリの初期化に一度webshimsロードする必要があります。そしてあなたのビューが変わるたびに、changendだったdom要素に.updatePolyfillを呼び出す必要があります。

一部のフレームワークでは、このために特別なイベントがあります。たとえば、jQueryモバイルはpageinitイベントを使用します。この場合

（jQM）次のように記述します。あなたがのsetTimeoutを使用する必要があるいくつかのフレームワークで

$(document).on('pageinit', function(e){ 
    $(e.target).updatePolyfill(); 
}); 

を：

render: function(target){ 
    setTimeout(function(){ 
     $(target).updatePolyfill(); 
    }, 0); 
} 

Answer 2

はちょうどこの問題に自分自身を走ったと私は私が持っていると思います

ビューがロードされた後、メインインデックスページのコントローラからupdatePolyFillメソッドを呼び出すだけです。

//Polyfill needs update when dynamic view loads 
$scope.$on('$viewContentLoaded', function() { 
    $('body').updatePolyfill(); 
}); 

トリックは、あなたがそのビュー上記のコントローラではなく、ビューのコントローラでこれを行う必要があるので、このイベントはアップ NG-ビューブロックのビューからバブルということです。また、すでにpolyfillingではない場合は呼び出さないでください。これを行う方法もわかりませんし、私が行っていることにpolyfillを必要としないChromeのすべてのテストで競合するようには見えませんでしたのみ）。