Come far funzionare la direttiva ng-disabled con scope isolato

Question

Recentemente ho dovuto fare in modo che un elemento Input funzionasse sia con ng-disabled sia con una direttiva personalizzata che usa scope isolato per valutare espressioni proprio come quello che ng-disabled sta facendo, in qualche modo, la direttiva personalizzata funziona bene ma ng-disabled non lo fa, dal momento che valuta solo l'espressione nell'ambito isolato.

La direttiva personalizzato è abbastanza semplice come:

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

mentre la pagina si presenta come:

<input name="pin" 
     ng-model="pin" 
     type="password" 
     required 
     ng-disabled="names == null" 
     conditional-autofocus="names != null" /> 

Qualcuno ha già la soluzione per questo problema?

Grazie in anticipo! Yanni

Answer 1

OK, per il mio caso sopra la mia soluzione è quella di modificare l'implementazione della direttiva, non utilizzare più ambito isolato:

angular.module('directives', []) 
.directive('conditionalAutofocus', function() { 
    return { 
     restrict:'A', 
     link:function (scope, element, attrs) { 
      scope.$watch(attrs.conditionalAutofocus, function(){ 
       if (scope.$eval(attrs.conditionalAutofocus)) { 
        element.focus(); 
       }else{ 
        element.blur(); 
       } 
      }); 
     } 
    } 
}); 

Answer 2

Ho avuto un problema simile ultimamente. Volevo disabilitare un pulsante in ambito isolato e utilizzare questa bella direttiva angolare ng-disabled. Dopo un po 'di scavo sono arrivato a una soluzione di questo tipo:

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

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

    //... 
} 

per valutare l'espressione ng-diabled invece di $scope solo saltare a $scope.$parent e tutte le variabili saranno available. È necessario impostare manualmente la proprietà disabilitata.

Answer 3

È possibile impostare un bind bidirezionale per l'ambito genitore nella definizione dell'ambito isolato. Quindi aggiungi un orologio sulla proprietà dell'oscilloscopio isolato. Questo duplica semplicemente il codice nella direttiva ngReadonly.

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

      scope.$watch('isReadonly', (value) => { 
       attrs.$set('readonly', !!value); 
      }); 
     } 
    } 
}); 

Answer 4

Ho avuto lo stesso problema e la soluzione più semplice imho. è utilizzare l'ambito isolato per ereditare la proprietà di 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 
      } 
     } 
    } 
}); 

potrebbe funzionare solo per limitare: 'E'. Non ho testato altri

Answer 5

Non hai bisogno della complessità delle altre risposte. Il problema è che la tua Direttiva non sa nemmeno che wtf ng-Disabled è. Se si desidera utilizzare ng-Disabilitato nel modello, è necessario inserirlo nel campo di applicazione o nei requisiti. Ad esempio, questa volontà non lavoro:

.directive('myDirective', function() { 
    return { 
     restrict: 'E', 
     template: '<input type="text" ng-disabled="fieldDisabled" />', 
     scope:{ something: '=' }, 
     link: function (scope, element, attrs) { 
      scope.something = attrs.something; 
     }, 
     controller: function($scope) { 
      $scope.fieldDisabled = false; 
      $scope.myAction = function() { 
       $scope.fieldDisabled = true; 
      }; 
     } 
    } 
}); 

Ma il seguente Will lavoro:

.directive('myDirective', function() { 
    return { 
     restrict: 'E', 
     template: '<input type="text" ng-disabled="fieldDisabled" />', 
     scope:{ something: '=', lol: '=ngDisabled' }, 
     link: function (scope, element, attrs) { 
      scope.something = attrs.something; 
     }, 
     controller: function($scope) { 
      $scope.fieldDisabled = false; 
      $scope.myAction = function() { 
       $scope.fieldDisabled = true; 
      }; 
     } 
    } 
}); 

Si noti che l'unico cambiamento è lol: '=ngDisabled'. Questo lo fa funzionare perché ora la tua direttiva sa cosa è ngDisabled. Non è necessario utilizzare lol o qualsiasi altro cablaggio speciale. È possibile utilizzare il controller come qualsiasi altro controller ora con le proprie variabili.