AngularJS won't parse ng-disabled in select

Question

All of the following HTML snippets fail with parsing errors when in a directive template:

1.

<select ng-model="model" ng-options="s.abbreviation as s.name for s in states" ng-disabled="false"></select>

fails with:

Error: Syntax Error: Token 'false' is an unexpected token at column 18 of the expression [state.isDisabled false] starting at [false]

2.

<select ng-model="model" ng-options="s.abbreviation as s.name for s in states" ng-disabled="disabled"></select>

where $scope.disabled is a boolean (false) fails with:

Error: Syntax Error: Token 'disabled' is an unexpected token at column 18 of the expression [state.isDisabled disabled] starting at [disabled].

3.

<select ng-model="model" ng-options="s.abbreviation as s.name for s in states" ng-disabled="isDisabled()"></select>

where $scope.isDiabled is a function fails with:

Error: Syntax Error: Token 'isDisabled' is an unexpected token at column 18 of the expression [state.isDisabled isDisabled()] starting at [isDisabled()].

When the same code was in the main HTML, it worked fine, but it stopped parsing ng-disabled after I moved it to its own directive.

This is the JavaScript used for this directive:

myApp.directive("selectState", [
function () {
    var states = [ // src: https://gist.github.com/mshafrir/2646763
    { "name": "Alabama", "abbreviation": "AL" } /*, { .. }, { .. }*/
    ];
    return {
    templateUrl: "/directives/select-state/select-state.html",
    replace: true,
    scope: { model: "=", isDisabled: "=" },
    restrict: "EA",

    controller: function ($scope, $element, $attrs) {
        $scope.states = states;
        $scope.disabled = false;
        if (!$scope.isDisabled) {
        $scope.isDisabled = function () { return false };
        }
    }
    }
  }
]);

What is wrong with it? If I remove the ng-disabled attribute, it works fine.

can you please provide a plunker?

tschiela
– tschiela

2013-09-09 10:34:07 +00:00
Commented Sep 9, 2013 at 10:34 — tschiela
– tschiela, Commented Sep 9, 2013 at 10:34

stackular · Accepted Answer · 2013-09-10 08:59:26Z

2

I figured it out, the including HTML also had ng-disabled instead of is-disabled so, as it seems (but I may be wrong), AngularJS was concatenating both ng-disabled attributes. I didn't spend much time looking into how things went wrong, but this was definitely the cause of the error.

I fixed it by changing this:

<select-state model="myModel" ng-disabled="myFunc"></select-state>

to this:

<select-state model="myModel" is-disabled="myFunc"></select-state>

answered Sep 10, 2013 at 8:59

stackular

1,4731 gold badge20 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS won't parse ng-disabled in select

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related