Varsayılan seçeneklerle AngularJS yönergesi

Angularjs ile yeni başlıyorum ve birkaç eski JQuery eklentisini Angular yönergelerine dönüştürmek için çalışıyorum. (Element) yönergem için, bir öznitelikte seçenek değeri belirtilerek geçersiz kılınabilen bir dizi varsayılan seçenek tanımlamak istiyorum.

Başkalarının bunu nasıl yaptığını araştırdım ve angular-ui kitaplığında ui.bootstrap.pagination da benzer bir şey gibi görünüyor.

Öncelikle tüm varsayılan seçenekler sabit bir nesnede tanımlanır:

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

Ardından getAttributeValueyönerge denetleyicisine bir yardımcı program işlevi eklenir:

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

Son olarak, bu bağlantı işlevinde öznitelikleri şu şekilde okumak için kullanılır:

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

Bu, bir dizi varsayılan değeri değiştirmek isteyen standart bir şey için oldukça karmaşık bir kurulum gibi görünüyor. Bunu yapmanın yaygın olan başka yolları var mı? Veya her zaman gibi bir yardımcı program işlevini tanımlamak getAttributeValueve seçenekleri bu şekilde ayrıştırmak normal mi? İnsanların bu ortak görev için hangi farklı stratejilere sahip olduğunu öğrenmekle ilgileniyorum.

Ayrıca, bonus olarak, interpolateparametrenin neden gerekli olduğu konusunda net değilim .

compileAyarlanmamışlarsa işlev okuma özniteliklerini kullanabilirsiniz - bunları varsayılan değerlerle doldurun.

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

=?Yönergenin kapsam bloğundaki özellik için bayrağı kullanın .

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

AngularJS v1.5.10 kullanıyorum ve preLinkderleme işlevinin varsayılan öznitelik değerlerini ayarlamak için oldukça iyi çalıştığını buldum .

Sadece bir hatırlatıcı:

• attrsher zaman ya da dizelerden biri olan ham DOM özellik değerlerini tutar undefined.
• scope(diğer şeylerin yanı sıra) sağlanan izolat kapsamı belirtimine ( / / / vb.) göre ayrıştırılan DOM özniteliği değerlerini tutar .=<@

Kısaltılmış snippet:

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