Блог

У меня проблема в IE11 с компонентом angular JS 1.5.6 для кнопки. У меня есть компонент для кнопки с именем my-button, и тип кнопки передается в привязке с именем button-type:

 <form role="form">
  <my-input label="Firstname" placeholder="Enter first name"></my-input>
  <my-input label="Lastname" placeholder="Enter last name"></my-input>
  <my-button label="Reset" button-type="reset" on-click="$ctrl.performClick(action)"></my-button>
  <my-button label="Submit" button-type="submit" on-click="$ctrl.performClick(action)"></my-button>
</form>
  

HTML-код компонента my-button:

 <button class="btn btn-default" type="{{$ctrl.buttonType}}" ng-click="$ctrl.click()">{{$ctrl.label}}</button>
  

Я решил свою проблему: http://plnkr.co/edit/ydthlLjKQQf9s6wdX9Zn?p=preview

Проблема в том, что для типа кнопки всегда установлено значение «отправить» в IE11, как вы можете видеть при захвате IE11 DOM:

В то время как, например, в Firefox тип кнопки правильный, как вы можете видеть при захвате Firefox DOM:

Все это приводит к функциональной ошибке в моем приложении angular с IE, потому что в IE, когда пользователь редактирует форму и нажимает enter, вызывается действие сброса, тогда как оно должно вызывать действие отправки.

Ошибка может быть легко воспроизведена: запустите плунжер как в IE, так и в Firefox, нажмите F12 для отображения консоли, начните редактирование формы и нажмите enter, в IE11 при нажатии enter результат в консоли «Запрашивается сброс», тогда как в Firefox результат тот, который ожидается: «Спросилидля отправки».

Как сказано в документе angular по совместимости с IE (https://docs.angularjs.org/guide/ie ): «Для атрибута type кнопок используйте теги типа ng-attr вместо type=»{{ someExpression }}». При использовании последнего Internet Explorer перезаписывает выражение с помощью type=»submit», прежде чем Angular сможет его интерполировать. «

Мне удается решить мою проблему, заменив type="{{$ctrl.buttonType}}" на ng-attr-type="{{$ctrl.buttonType}}"