setting ng-disabled in a directive from outer controller $scope

Question

The linked fiddle contains a simple directive with a <select>. I would like to disable the <select> tag by setting a variable in the outer controller. In devtools I see the value of ng-disabled to change from false to true, but the <select> remains enabled. Could someone help me on what am I doing wrong?

http://jsfiddle.net/bika/PRsH7/12/

score 4 · Accepted Answer · answered Feb 23 '14 at 11:12

Try:

.directive( 'myTag', function() {
    return {
        restrict: 'E',
        scope: {
            isDisabled: '=' //use 2-way binding instead.
        },
        template: '<select ng-disabled="isDisabled"><option>not disabled</option></select>'
    };
});

HTML:

<my-tag is-disabled="isDisabled"></my-tag>

DEMO

score 2 · Answer 2 · edited May 23 '17 at 11:45

This happens because when using "@", isDisabled is evaluated at a string, not a boolean. isDisabled is an expression, and hence you should use "&" to pass it to your directive.

    .directive( 'myTag', function() {
      return {
        restrict: 'E',
        scope: {
          isDisabled: '&'
        },
        template: '<select ng-disabled="isDisabled()"><option>not disabled</option></select>',
      };
    });

Fiddle: http://jsfiddle.net/bulbul/PRsH7/16/

More reference: http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/ What is the difference between '@' and '=' in directive scope in AngularJS?

You might also want to watch John Lindquist's awesome videos on directives: https://egghead.io/search?q=directive

setting ng-disabled in a directive from outer controller $scope

2 Answers2