jquery - 在Angular应用中使用webshims polyfill

我试图在有角度的应用程序中使用webshims polyfill，该应用程序也使用requirejs进行依赖项管理。我试图消除form和input这样的表单字段中缺少button属性的情况，该字段告诉浏览器特定按钮或输入属于哪个表单。 IE9缺少此功能。

我认为使用此polyfill的最佳方法是创建一个form指令，并在链接函数内调用$.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 polyfill的方法：

我的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']
    }
  }
}

事实是，即使填充了垫片，甚至调用了正确的函数，垫片也似乎无法正常工作，因为IE9仍存在HTML5表单属性（占位符，表单属性等）的问题

我在这里想念什么？

最佳答案

我没有使用angular的经验，所以我不知道您是否愿意在“ form”指令中执行此操作是正确的（但我对此表示怀疑）。

但首先：webshims polyfiller文件注册为名为“ polyfiller”的名为amd的模块。最好将您的网页垫片重命名为polyfiller

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

和：

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

在define函数内部，在调用polyfill方法之前，还应该正确设置basePath：

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

此外，IE10支持自动对焦和占位符，但IE11也不支持form属性。因此，您应该删除Modernizr测试。

因此，让我们看看您当前的问题是什么。

您可以在IE9的控制台webshims.isReady('forms')中运行以下代码吗？

如果是真的：
如果表单已准备就绪，请在IE9的控制台$('body').updatePolyfill()中运行以下代码。
这有帮助吗？

如果为假：
在IE9的控制台webshims.modules["form-core"].loaded中运行以下代码

它返回true还是undefined / false。

如果返回undefined / false：
确保a）webshims.polyfill（'forms'）; b）没有网络错误->文件加载时没有404，也请参见上面的basePath配置。



关于webshims加载和执行的一些信息：

通常，您应该在应用初始化时加载一次webshims。然后，每次您的视图更改时，都应在已更改的dom元素上调用.updatePolyfill。

一些框架为此具有特殊事件。例如，jQuery mobile使用pageinit事件。

在这种情况下（jQM），您将编写：

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

在某些框架中，您需要使用setTimeout：

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