Implementieren der Vererbung in AngularJS-Direktiven

Ich versuche, OOP-Vererbung in AngularJS-Direktiven zu implementieren, um wiederverwendbare Steuerelemente zu erstellen. Ich verwende Base2's Class definition für die Vererbung. Was ich dachte, eine Richtlinie wie dieseImplementieren der Vererbung in AngularJS-Direktiven

<control-input type="text" name="vendor_name"></control-input>

Dann umzusetzen wäre, würde ich schaffte eine BaseControl Klasse für gemeinsame Funktionalität

angular.module('base',[]).factory('BaseControl', function() { 
    return Base.extend({ 
    'restrict': 'E', 
    'require': '^parentForm' 
    /* ... */ 
    }; 
});

Und dann würde ich spezifische Kontrollen

angular.module('controls',['base']).factory('TextControl', function(BaseControl) { 
    return BaseControl.extend({ 
    /* specific functions like templateUrl, compile, link, etc. */ 
    }; 
});

Das schafft Problem ist, dass ich eine einzelne Direktive control-input verwenden und den Typ in den Attributen angeben möchte, aber das Problem ist, wenn ich die Direktive erstellen, ich nicht k jetzt wie man den typ

angular.module('controls',['controls']).directive('control-input', function(TextControl) { 
    /* here it should go some code like if (type === 'text') return new TextControl(); */ 
});

Irgendwelche Ideen?

Quelle

2013-10-04 Andres Rovira

Sie könnten die attrs Parameter der Link-Funktion verwenden, um den Typ jeder Direktive zu erhalten. Sehen Sie sich den folgenden Code an und überprüfen Sie Ihre Konsole. (http://jsbin.com/oZAHacA/2/)

<html ng-app="myApp"> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 
    <script> 
     var myApp = angular.module('myApp', []); 

    myApp.directive('controlInput', [function() { 
     return { 
      restrict: 'E', 
      link: function (scope, iElement, iAttrs) { 
       console.log(iAttrs.type); 
      } 
     }; 
    }]); 

    </script> 
    </head> 
<body> 

    <control-input type="text" name="vendor_name"></control-input> 

</body> 
</html>

Quelle

2013-10-04 01:04:28

Ja, das Problem ist, dass ich die DDO selbst als Erbe zurückkehren möchten, ersetzen Sie die 'return {...}' 'durch return new Textcontrol (...)' oder so ähnlich dass ich zu diesem Zeitpunkt keine Informationen über Attribute oder Umfang habe. –

Implementieren der Vererbung in AngularJS-Direktiven

Antwort

Verwandte Themen