AngularJS : extend input directive

Question

가능한 경우 Angular의 입력 지시문을 확장하는 것이 궁금한가요? 페이지의 모든 입력 필드에 일부 리스너를 연결하려고합니다. 나는 당신이 $provide.decorate으로 기존 모듈을 장식 할 수 있다고 생각하지만, 나는 지시어 (그리고 더 정확하게는 입력 지시어)로 이것을 어떻게하는지 모른다.

그럼, 누가 올바른 방향으로 나를 밀 수 있습니까? 몇 가지 예가 있습니까?

내보기에서

angular.module('onFocusBlur'). 
directive('onFocusBlur', ["$rootScope", function($rootScope) { 
    return { 
    restrict: "A", 
    link: function(scope, elem, attrs) { 
     elem.bind('focus',function() { 
      scope.$apply(function() { 
      $rootScope[attrs.onFocusBlur] = true; 
      }); 
     }); 
     elem.bind('blur',function() { 
      scope.$apply(function() { 
      $rootScope[attrs.onFocusBlur] = false; 
      }); 
     }); 
    } 
    }; 
}]); 

, 나는이 같은 입력 필드에이를 추가 할 수 있습니다 :

<input type="email" ng-model="email" on-focus-blur="repositionNavBar"> 

여기에 편집

는 지금까지이 나의 지시이다 단점은 모든 입력 필드에 대해이 리스너를 코드에 수동으로 첨부해야한다는 것입니다. 따라서 기존 입력 지시문을 변경하여이 수신기를 포함하는 것이 유용합니다.

Answer 1

입력 지시문을 비롯한 모든 지시문을 쉽게 확장 할 수 있습니다. Here은 지시문에 클래스를 추가하는 빠른 예제입니다.

Answer 2

답변보기 this question을 참조하십시오. 그들은 $ 제공을 사용하여 동일한 이름의 지시문을 작성하는 지시문을 확장하는 몇 가지 다른 옵션에 대해 설명합니다. https://github.com/angular/angular.js/wiki/Understanding-Directives

Answer 3

여기에 당신이 당신 자신이 제안으로 $provide.decorator으로, 각도 input 지시에 내장 된 장식 수있는 방법의 짧은 요점은 다음과 같습니다

또한,이 링크 ("확장 지침"에서) 몇 가지 기술을 설명합니다. 내가보기로이 방법의

app.config(function ($provide) { 

    // Suffix is "Directive" for decorating directives. 
    // $delegate refers to the original directive definition. 
    $provide.decorator('inputDirective', function ($delegate) { 

    // When decorating a directive, $delegate is an array containing 
    // all of the directives of the same name. 
    // We're interested in the first in this case. 
    var directive = $delegate[0]; 

    // Store a reference to the original directive linking function. 
    var link = directive.link; 

    // Hook into the compile phase of the directive. 
    directive.compile = function() { 

     // The function returned by compile is your new link function. 
     // Or 'postLink', to be exact. 
     return function (scope, el, attrs) { 

     // Run the original link function. 
     link.apply(this, arguments); 

     // Your new listener function 
     function listener (e) { 
      console.log(e); 
     } 

     // Set up your listener(s). 
     el.bind('blur', listener); 
     el.bind('focus', listener); 
     }; 
    }; 

    // Return the decorated original ($delegate). 
    return $delegate; 
    }); 

}); 

장점 :

1. 그것은 행동을 증가시키기 위해 다른 지시문을 추가하는 것보다 더 DRY입니다.
2. 제 3 자 동작 확장입니다.
3. 대부분의 경우, 사용자가 꾸미고있는 지시어 (또는 해당 서비스)의 내부 구현에 대해 알 필요가 없습니다.

는 여기 jsBin입니다 : http://jsbin.com/yafecinu/2/edit

나는 그 장식 지침에 심층 간다, 당신은 this article 살펴 보도록 권하고 싶습니다. 이 기사에서는 링크 단계뿐만 아니라 컨트롤러 및 사전 DOM 조작 조작에 대해서도 다룹니다. 아주 좋은 읽을 거리!