Question

我正在尝试在角度应用中使用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表单属性问题（占位符，表单属性等）

我在这里缺少什么？

Answer 1

我自己遇到了这个问题，我认为我有一个更简单的解决方案似乎工作正常：

在视图加载后，只需从主索引页面的控制器调用updatePolyFill方法：

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

诀窍是此事件从ng-view块中的视图冒出向上，因此您需要在该视图上方的控制器中执行此操作，而不是在视图的控制器中执行此操作。另外，我想，如果它不是已经填充的话就不应该调用它，但是不知道如何做到这一点但是它并没有在Chrome的所有测试中发生冲突，因为我不需要填充多层填充物。＃39;正在做（仅限表单控件）。

Answer 2

我没有角度的经验，所以我不知道你在“形式”指令中做出这样的决定是对的（但我对此表示怀疑）。

但首先：webshims polyfiller文件注册为名为'polyfiller'的命名amd模块。将您的webshims重命名为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中也不支持表单属性。所以你应该删除Modernizr测试。

让我们来看看你目前的问题是什么。

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

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

如果错误：在IE9的控制台webshims.modules["form-core"].loaded

中运行以下代码

是返回true还是undefined / false。

如果返回undefined / false：确保a）webshims.polyfill（'forms'）;真的被称为b）没有网络错误 - ＆gt;在没有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);
}

在Angular应用程序中使用webshims polyfill

2 个答案: