[javascript] 기본 옵션이있는 AngularJS 지시문

Program / 글쓴이

방금 angularjs로 시작하고 몇 가지 오래된 JQuery 플러그인을 Angular 지시문으로 변환하려고합니다. 속성에 옵션 값을 지정하여 재정의 할 수있는 (요소) 지시문에 대한 기본 옵션 세트를 정의하고 싶습니다.

다른 사람들 이이 작업을 수행 한 방식을 둘러 보았고 angular-ui 라이브러리에서 ui.bootstrap.pagination 은 비슷한 일을하는 것 같습니다.

먼저 모든 기본 옵션은 상수 객체에 정의됩니다.

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

그런 다음 getAttributeValue유틸리티 기능이 지시문 컨트롤러에 연결됩니다.

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

마지막으로 이것은 링크 함수에서 속성을 다음과 같이 읽는 데 사용됩니다.

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

이것은 일련의 기본값을 바꾸고 싶어하는 것처럼 표준으로 사용하기에는 다소 복잡한 설정처럼 보입니다. 이 작업을 수행하는 다른 방법이 있습니까? 아니면 getAttributeValue이런 식으로 옵션과 구문 분석 옵션과 같은 유틸리티 기능을 항상 정의하는 것이 정상 입니까? 사람들이이 공통 과제에 대해 어떤 전략을 가지고 있는지 알고 싶습니다.

또한 보너스로 왜 interpolate매개 변수가 필요한지 확실하지 않습니다.

답변

compile기능 을 사용할 수 있습니다 -속성이 설정되지 않은 경우 읽기-기본값으로 채 웁니다.

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

답변

=?지시문의 범위 블록에서 속성에 대한 플래그를 사용하십시오 .

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을 사용하고 있으며 기본 속성 값을 설정 하는 데 preLink컴파일 기능 이 더 잘 작동한다는 것을 알았습니다 .

알림 :

  • attrs항상 또는 문자열 인 원시 DOM 속성 값을 보유합니다 undefined.
  • scope제공된 분리 범위 사양 ( / / / 등) 에 따라 구문 분석 된 DOM 속성 값 을 보유합니다 .=<@

요약 된 스 니펫 :

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

답변