Search code examples
angularjsangularjs-directiveangularjs-ng-disabled

ng-disabled within angular directive

I have an angular directive:

angular.module("app").directive("myButtons", function () {
    return {
        restrict: "E",
        scope: {
            bdisabled: '='
        },
        templateUrl: "buttons.html"
    }
});

template:

<input type="submit" value="Update" ng-disabled="{{bdisabled}}" />

html:

<my-buttons bdisabled="!form.$valid"></my-buttons>

I'm trying to set the disabled state of the button in my template. The above code almost works.

The form loads and is valid, the html is rendered as follows:

<input type="submit" ng-click="bdisabled()" value="Save" ng-disabled="false" disabled="disabled">

When I make the form invalid ng-disabled changes to true but disabled="disabled" stays no matter what.

What am I doing wrong?

Solution

  • since ng-disabled is angular directive no need to use the curly brackets 

    <input type="submit" value="Update" ng-disabled="bdisabled" />