Jak zezwolić na wyłączenie dyrektywy ng z izolowanym zakresem?

Question

Niedawno muszę wykonać pracę elementu wejściowego zarówno z ng-disabled, jak i z dyrektywy użytkownika, która używa izolowanego zakresu do oceny ekspresji, tak jak robi to ng-disabled, w jakiś sposób, dyrektywa niestandardowa działa dobrze, ale ng-disabled nie, ponieważ ocenia tylko wyrażenie w obrębie izolowanego zakresu.

Dyrektywa zwyczaj jest dość prosta jak:

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

natomiast strona wygląda tak:

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

Ktoś ma już rozwiązanie tego problemu?

Z góry dziękuję! Yanni

Answer 1

OK, na moim własnym przypadku powyżej mojego rozwiązania jest zmiana implementacji dyrektywy, nie stosować samodzielnie już zakres:

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

miałem podobny problem ostatnio. Chciałem wyłączyć przycisk w odosobnionym zakresie i użyć tej ładnej dyrektywy kątowej ng-disabled. Po pewnym kopania doszedłem do takiego rozwiązania:

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

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

    //... 
} 

Aby ocenić ekspresję ng-diabled zamiast $scope po prostu skoczyć do $scope.$parent i wszystkie zmienne będzie dostępna. Niestety wymagane jest ręczne ustawienie wyłączonej właściwości.

Answer 3

Możesz ustawić dwukierunkowe wiązanie do zakresu nadrzędnego w definicji izolowanego zakresu. Następnie dodaj zegarek na izolowanej właściwości zakresu. To tylko powiela kod w dyrektywie 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

Miałem ten sam problem i najprostsze rozwiązanie imho. jest użycie izolowanego zasięgu do dziedziczenia właściwości 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 
      } 
     } 
    } 
}); 

Może działać tylko w celu ograniczenia: "E". Nie przetestowałem innych

Answer 5

Nie potrzebujesz żadnej złożoności innych odpowiedzi. Problem polega na tym, że twoja dyrektywa nie zna wtf ng-Disabled. Jeśli chcesz użyć ng-Disabled w swoim szablonie, musisz wprowadzić go do swojego zakresu lub wymagań. NIE pracy Na przykład ten będzie:

.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; 
      }; 
     } 
    } 
}); 

ale następujący Will pracy:

.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; 
      }; 
     } 
    } 
}); 

Należy pamiętać, że jedyną zmianą jest lol: '=ngDisabled'. To sprawia, że ​​działa, ponieważ teraz twoja dyrektywa wie, czym jest ngDisabled. Nie musisz używać urządzenia lol ani żadnego innego specjalnego okablowania. Możesz używać kontrolera tak jak każdego innego kontrolera teraz z własnymi zmiennymi.