Jquery 在Angular应用程序中使用webshims polyfill

我试图在angular应用程序中使用，该应用程序也使用requirejs进行依赖关系管理。我试图填补表单字段中

表单

属性的缺失，例如

输入

和

按钮

，它告诉浏览器特定按钮或输入属于哪个表单。IE9缺少这个特性

我认为使用此polyfill的最佳方法是创建一个表单指令，并在link函数中调用

$.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模块。最好将您的webshims重命名为polyfiller

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

以及：

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

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

此外，IE10支持自动对焦和占位符，但表单属性甚至在IE11中也不支持。因此，您应该删除Modernizer测试

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

您能否在IE9的控制台

webshims.isReady（'forms'）

中运行以下代码

如果为真： 如果表单已准备就绪，请在IE9的控制台

$（'body'）中运行以下代码。
这有用吗

如果为假：
在IE9的控制台中运行以下代码
webshims.modules[“form core”]。已加载

它是否返回true或undefined/false

如果返回undefined/false：
确保a）webshims.polyfill（“表格”）；是真的调用和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);
}

我自己也遇到了这个问题，我想我有一个更简单的解决方案，似乎效果很好：

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

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

诀窍是，此事件从ng视图块中的视图向上冒泡，因此您需要在该视图上方的控制器中执行此操作，而不是在视图的控制器中。另外，我想，如果它还没有进行多边形填充，就不应该调用它，尽管还不知道如何进行，而且它与Chrome的测试似乎没有任何冲突，因为Chrome不需要对我正在做的事情进行多边形填充（仅限于表单控件）。
完美！过了一段时间我才明白（没有检查）。问题是basePath的计算不正确，所以我不得不通过，是的，使用form指令的决定本身并不是很明智，因为polyfill负责支持的浏览器。无论如何谢谢你！我有一个小问题，我现在主要关注的是IE9+。在IE9中，即使不对元素调用updatePolyfill（），似乎也不会引起任何问题。我已经切换了视图，创建了动态视图，等等。我想angular在IE中会处理这个问题（即使我现在没有使用指令，我通常会把这个代码放在那里…），我不能说。表单属性polyfill不需要updatePolyfill调用。如果占位符仍然有效，Angular似乎会以某种方式缓存呈现的标记。感谢详细的疑难解答。对于那些像我一样试图在angular指令中使用
（或任何其他部分支持元素）的人，您可以在指令的
链接
函数中包含对
$（'body'）.updatePolyfill（）
的调用。这应该确保在实例化填充元素时polyfiller运行。我认为将webshims配置为服务会更好，但我还没有做到这一点。
//Polyfill needs update when dynamic view loads
$scope.$on('$viewContentLoaded', function() {
    $('body').updatePolyfill();
});