Sun
Sun

Reputation: 4718

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?

Upvotes: 1

Views: 1032

Answers (3)

Prince Gracy
Prince Gracy

Reputation: 121

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

Upvotes: 2

anoop
anoop

Reputation: 3822

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

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

Upvotes: 2

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41387

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

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

Upvotes: 2

Related Questions