How to let ng-disabled directive work with isolated scope

angularjs, scope

Solution

I had this same issue, and the easiest solution imho. is to use the isolated scope to inherit the property of ngDisabled.

angular.module('directives', [])
.directive('conditionalAutofocus', function () {
    return {
        restrict:'A',
        scope:{
            condition:'&conditionalAutofocus',
            disabled:'=ngDisabled'
        },
        link:function (scope, element, attrs) {
            if (scope.condition()) {
                attrs.$set('autofocus','true');
            }
            if(scope.disabled){
                //is disabled
            }
        }
    }
});

Might only work for restrict : 'E'. Have not tested others

Problem

Recently I have to make a Input element work with both ng-disabled and an custom directive which use isolated scope to evaluate expression just like what ng-disabled is doing, somehow, the custom directive works fine but ng-disabled doesn't, since it only evaluate expression within the isolated scope. The custom directive is quite simple like: ``` angular .module('directives', []) .directive('conditionalAutofocus', function () { return { restrict:'A', scope:{ condition:'&conditionalAutofocus' }, link:function (scope, element, attrs) { if (scope.condition()) { attrs.$set('autofocus','true'); } } } }); ``` while the page looks like: ``` <input name="pin" ng-model="pin" type="password" required ng-disabled="names == null" conditional-autofocus="names != null" /> ``` Anybody already has solution for this issue? Thanks in advance! Yanni

Original source