AngularJS-Direktive mit Standardoptionen

Ich fange gerade mit anglejs an und arbeite daran, einige alte JQuery-Plugins in Angular-Direktiven zu konvertieren. Ich möchte eine Reihe von Standardoptionen für meine (Element-) Direktive definieren, die durch Angabe des Optionswerts in einem Attribut überschrieben werden können.

Ich habe mich nach der Art und Weise umgesehen, wie andere dies getan haben, und in der Angular-UI - Bibliothek scheint die ui.bootstrap.pagination etwas Ähnliches zu tun.

Zunächst werden alle Standardoptionen in einem konstanten Objekt definiert:

.constant('paginationConfig', {
  itemsPerPage: 10,
  boundaryLinks: false,
  ...
})

Dann wird eine getAttributeValueDienstprogrammfunktion an die Direktivensteuerung angehängt:

this.getAttributeValue = function(attribute, defaultValue, interpolate) {
    return (angular.isDefined(attribute) ?
            (interpolate ? $interpolate(attribute)($scope.$parent) :
                           $scope.$parent.$eval(attribute)) : defaultValue);
};

Schließlich wird dies in der Verknüpfungsfunktion verwendet, um Attribute als einzulesen

.directive('pagination', ['$parse', 'paginationConfig', function($parse, config) {
    ...
    controller: 'PaginationController',
    link: function(scope, element, attrs, paginationCtrl) {
        var boundaryLinks = paginationCtrl.getAttributeValue(attrs.boundaryLinks,  config.boundaryLinks);
        var firstText = paginationCtrl.getAttributeValue(attrs.firstText, config.firstText, true);
        ...
    }
});

Dies scheint eine ziemlich komplizierte Einrichtung für etwas zu sein, das so Standard ist wie das Ersetzen einer Reihe von Standardwerten. Gibt es andere übliche Möglichkeiten, dies zu tun? Oder ist es normal, immer eine Dienstprogrammfunktion wie getAttributeValueund Analyseoptionen auf diese Weise zu definieren? Ich bin daran interessiert herauszufinden, welche unterschiedlichen Strategien Menschen für diese gemeinsame Aufgabe haben.

Als Bonus ist mir auch nicht klar, warum der interpolateParameter erforderlich ist.

Sie können die compileFunktion verwenden - Attribute lesen, wenn sie nicht festgelegt sind - sie mit Standardwerten füllen.

.directive('pagination', ['$parse', 'paginationConfig', function($parse, config) {
    ...
    controller: 'PaginationController',
    compile: function(element, attrs){
       if (!attrs.attrOne) { attrs.attrOne = 'default value'; }
       if (!attrs.attrTwo) { attrs.attrTwo = 42; }
    },
        ...
  }
});

Verwenden Sie das =?Flag für die Eigenschaft im Bereichsblock der Direktive.

angular.module('myApp',[])
  .directive('myDirective', function(){
    return {
      template: 'hello {{name}}',
      scope: {
        // use the =? to denote the property as optional
        name: '=?'
      },
      controller: function($scope){
        // check if it was defined.  If not - set a default
        $scope.name = angular.isDefined($scope.name) ? $scope.name : 'default name';
      }
    }
  });

Ich verwende AngularJS v1.5.10 und habe festgestellt, dass die preLinkKompilierungsfunktion zum Festlegen von Standardattributwerten ziemlich gut funktioniert .

Nur eine Erinnerung:

• attrsEnthält die unformatierten DOM-Attributwerte, die immer entweder undefinedoder Zeichenfolgen sind.
• scopeEnthält (unter anderem) die DOM-Attributwerte, die gemäß der bereitgestellten Isolationsbereichsspezifikation ( / / / usw.) analysiert wurden .=<@

Kurzer Ausschnitt:

.directive('myCustomToggle', function () {
  return {
    restrict: 'E',
    replace: true,
    require: 'ngModel',
    transclude: true,
    scope: {
      ngModel: '=',
      ngModelOptions: '<?',
      ngTrueValue: '<?',
      ngFalseValue: '<?',
    },
    link: {
      pre: function preLink(scope, element, attrs, ctrl) {
        // defaults for optional attributes
        scope.ngTrueValue = attrs.ngTrueValue !== undefined
          ? scope.ngTrueValue
          : true;
        scope.ngFalseValue = attrs.ngFalseValue !== undefined
          ? scope.ngFalseValue
          : false;
        scope.ngModelOptions = attrs.ngModelOptions !== undefined
          ? scope.ngModelOptions
          : {};
      },
      post: function postLink(scope, element, attrs, ctrl) {
        ...
        function updateModel(disable) {
          // flip model value
          var newValue = disable
            ? scope.ngFalseValue
            : scope.ngTrueValue;
          // assign it to the view
          ctrl.$setViewValue(newValue);
          ctrl.$render();
        }
        ...
    },
    template: ...
  }
});