angularjs - Angular UI と webshims を使用した IE8 でのフォーム検証

Question

IE8 で HTML5 をサポートするために webshims を使用しています。私の HTML5 フォーム検証は IE8 で動作しています。しかし、ポップアップにフォームがある場合 (Angular UI Modal を使用しています)、フォーム送信 (ng-submit) でモーダル ボックスが閉じ、検証メッセージが右上隅に表示されます。

私の環境は

• jquery-1.11.1.js
• AngularJS v1.2.26
• Angular UI モーダル 0.10.0
• webshim-1.15.4

コンソールで、このスクリプト エラーが発生します

「無効な要素が隠されているようです。要素を表示するか、無効化/読み取り専用を使用して要素を検証から除外します。fieldset[disabled] を使用すると、要素のグループを無視できます! 選択置換の場合は、shims/form-combat.js を参照してください。問題を修正します。」

Angular アプリの HTML ロード webshims の一部

<script src="resources/js/jquery-1.11.1.js"></script>
<script src="resources/js/js-webshim/minified/polyfiller.js"></script>

<script>
    $.webshims.setOptions('forms', {
        overrideMessages : true
    });
    $.webshims.setOptions({
        waitReady : false
    });
    $.webshims.polyfill();
</script>

// 動的ビューの読み込み時に Polyfill を更新するための angular アプリの以下のメソッド。

angular.module('essApp').run(function($rootScope, $templateCache) {
    $rootScope.$on('$viewContentLoaded', function() {       
        $('body').updatePolyfill();
    });
});

ポップアップ/モーダルを呼び出す角度関数

$scope.showGoalDetail = function(index) {
                $log.info('index is', index);
                $log.info('goal is', $scope.goals.goalList[index]);
                var modalInstance = $modal.open({
                    templateUrl : 'org/goalDetailPopUp.html',
                    controller : 'PopUpInstanceCtrl',
                    size : 'lg',
                    backdrop : 'static',
                    resolve : {
                        valueObject : function() {
                            var valueObject = new Object();
                            valueObject.goal = {};
                            angular.copy($scope.goals.goalList[index], valueObject.goal);
                            valueObject.kpiList=$scope.goals.kpiList;
                            return valueObject;
                        }
                    }
                });

モーダルウィンドウの私のフォーム

<div class="modal-header" style="background-color: #428bca; color: #FFFFFF">
    <h3 class="modal-title">Goal Detail</h3>
</div>
<div class="modal-body">
    <div class="panel panel-default">
        <div class="panel-heading">
            <p class="panel-title">Administration of prespective and priority</p>
        </div>
        <div class="panel-body">
            <form class="form-horizontal" role="form" ng-submit="ok()">
                <div class="form-group">
                    <label class="col-md-2 control-label">Dimension</label>
                    <div class="col-md-6">
                        <input type="text" class="form-control" required disabled ng-model="valueObject.goal.perspectiveDesc">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">Key PerformanceIndicator</label>
                    <div class="col-md-10">
                        <textarea class="form-control" required ng-model="valueObject.goal.keyPerformanceIndicator"></textarea>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">OK</button>
                <button class="btn btn-danger" ng-click="cancel()">Cancel</button>
            </form>
        </div>
    </div>
</div>
<div class="modal-footer"></div>

フィールドの横にあるポップアップに検証が正しく表示されるようにする必要があります。