ng-disabled within angular directive

Question

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?

score 2 · Accepted Answer · answered Jun 08 '17 at 10:47

2

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

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

answered Jun 08 '17 at 10:47

Sachila Ranawaka

39,756
7
56
80

Perfect. Thank you. I knew it would be a simple fix. – Sun Jun 08 '17 at 10:49

score 2 · Answer 2 · answered Jun 08 '17 at 10:48

2

Change ng-disabled="{{bdisabled}}" to ng-disabled="bdisabled",

No need of interpolation operators, as its already in angular scope.

answered Jun 08 '17 at 10:48

anoop

3,812
2
16
28

score 2 · Answer 3 · answered Jun 08 '17 at 11:26

2

You can use the variable itself inside the ng-disabled likeng-disabled='disabled' No need of interpolation operator since it is a native angular directive

answered Jun 08 '17 at 11:26

Prince Gracy

121
4

ng-disabled within angular directive

3 Answers3