How to let ng-disabled directive work with isolated scope

Question

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

Answer 1

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

Answer 2

I had a similar problem lately. I wanted to disable a button in isolated scope and use this nice angular ng-disabled directive. After some digging I came to a solution like this:

link: function($scope, element, attrs){

    $scope.$parent.$watch(attrs.ngDisabled, function(newVal){
        element.prop('disabled', newVal);
    });

    //...
}

To evaluate the ng-diabled expression instead of $scope just jump to $scope.$parent and all your variables will be avaliable. Unfortunatly manually setting the disabled property is required.