9

我正在尝试在一个角度应用程序中使用webshims polyfill，该应用程序也使用 requirejs 进行依赖管理。我正在尝试填充form表单字段中缺少的属性，例如inputand button，它告诉浏览器特定按钮或输入属于哪个表单。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']
    }
  }
}

问题是即使 shim 加载，甚至调用了正确的函数，shims 似乎也没有工作，因为 IE9 仍然存在 HTML5 表单属性（占位符、表单属性等）的问题

我在这里想念什么？

4

2 回答 2

8

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

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

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

诀窍是这个事件会从 ng-view 块中的视图中冒出来，因此您需要在该视图上方的控制器中执行此操作，而不是在视图的控制器中。另外，我想，如果它还没有填充填充，则不应该调用它，虽然不知道如何做到这一点，但它似乎与 Chrome 的所有测试都没有冲突，因为我正在做的事情不需要填充（表单控件只要）。

于 2014-05-22T23:51:25.250 回答
5

我没有角度方面的经验，所以我不知道您在“表单”指令中执行此操作的决定是否正确（但我对此表示怀疑）。

但首先：webshims polyfiller 文件注册为名为“polyfiller”的命名 amd 模块。将您的 webshims 重命名为 polyfiller 会很好

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

和：

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

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

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

此外，IE10 支持自动对焦和占位符，但即使在 IE11 中也不支持 form 属性。所以你应该删除 Modernizr 测试。

那么让我们看看您当前的问题是什么。

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

如果为真：如果表单已准备好，请在 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);
}
于 2013-12-17T17:07:31.723 回答