在Angular应用程序中使用webshims polyfill

Question

我正在尝试在角度应用程序中使用webshims polyfill,它也使用requirejs进行依赖项管理.我试图form在表单字段中填充缺少属性,例如input和button,它告诉浏览器形成特定按钮或输入属于哪个.IE9缺乏此功能.

我认为使用此polyfill的最佳方法是创建一个form指令,并调用$.webshims.polyfill('forms')link函数内部.

指令

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的所有测试中看起来并没有冲突,因为我不需要填充polyfills(表单控件)只要).

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中也不支持form属性.所以你应该删除Modernizr测试.

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

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

如果为true:如果表单已准备好,请在IE9的控制台中运行以下代码$('body').updatePolyfill().这有帮助吗？

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

它是返回true还是undefined/false.

如果它返回undefined/false:确保a)webshims.polyfill('forms'); 真的被调用了b)没有网络错误 - >没有404加载文件也看到上面的basePath配置.

关于webshims加载和执行的一些事情:

通常,您应该在应用初始化时加载一次webshims.然后,每当您的视图发生更改时,您应该调用更改.updatePolyfill的dom元素.

一些框架有特殊事件.例如,jQuery mobile使用pageinit事件.

在这种情况下(jQM)你会写:

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

在某些框架中,您需要使用setTimeout:

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