jquery - 在 Angular 应用程序中使用 webshims polyfill

Question

我正在尝试使用 webshims polyfill在一个 Angular 应用程序中，它也使用 requirejs 进行依赖管理。我正在尝试弥补 input 和 button 等表单字段中缺少 form 属性的情况，它告诉浏览器哪个形成特定按钮或输入属于。 IE9 缺少此功能。

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

我自己刚刚遇到了这个问题，我想我有一个更简单的解决方案，看起来效果很好:

只需在 View 加载后从主索引页面的 Controller 调用 updatePolyFill 方法即可:

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

诀窍在于，此事件从 ng-view block 中的 View 向上冒泡，因此您需要在该 View 上方的 Controller 中执行此操作，而不是在 View 的 Controller 中。另外，我想，如果它还没有进行填充，那么就不应该调用它，但不确定如何做到这一点，而且它似乎与 Chrome 的测试完全没有冲突，Chrome 不需要我正在做的填充(表单控件)仅)。