bob bob - 2 months ago 6
AngularJS Question

IE11 - form.$submitted being set wronly on Angular button-component click

This plunker

I have Angular directive

bl-button
that wraps 'button' element and I am passing over
my-type
to set button's
type
attribute and
my-click
function to run something.

My problem is that, only in IE11, parent form's $submitted flag is being set even when I am passing "button" via
my-type
..?

<bl-button my-click="myJob(myform)" my-type="button">Save2</bl-button>


In Chrome or FF, as expected, $submitted is being set only when I am saying
my-type="submit"
.

I may be missing something here.

Edit: below is my directive:

.directive('blButton', function () {
return {
restrict: 'E',
transclude: true,
scope: {
myClick: '&', // myClick() returns promise
myType: '@' // by default 'button'
},
template: '<button type="{{myType1}}" ng-click="click()" ng-transclude></button>',
link: function (scope, elem, attrs) {

scope.myType1 = scope.myType || 'button';

scope.click = function () {
scope.myClick()
.then(function(data) {
console.log('resolved:', data);
}, function(data) {
console.log('rejected:', data);
});
};
}
};

});

Answer

I believe you're falling into this bug in AngularJS. The workaround, from that bug:

Workaround: Using ng-attr-type="{{someInterpolatedThing}}" fixes it.

Note that this is also listed in Angular's Internet Explorer Compatibility page.