It appears using ng-disabled on an element directive with replace: true and on the root element of the directive's template results in angular incorrectly trying to combine the two ng-disabled conditions.
html:
<body ng-controller="myCtrl">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<my-submit-button ng-disabled="condition1"></my-submit-button>
</body>
js:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.condition1 = true;
});
app.directive('mySubmitButton', function() {
return {
restrict: 'E',
replace: true,
controller: function($scope) {
$scope.condition2 = false;
},
template: '<button type="button" ng-disabled="condition2">My Button</button>'
};
});
Results in rendered html:
<button type="button" ng-disabled="condition1 condition2">My Button</button>
Notice condition1 condition2 doesn't have an && in between.
Here is a jsBin example of the problem.
Is this an angular bug or am I missing something?
And if it is angular's fault, is there a way I can handle it more gracefully? Adding scope: {ngDisabled: '='} to the directive doesn't seem to stop angular from automatically combining (incorrectly) condition1 and condition2.
Also, if it is an angular bug, where do I report it?
