사용자 지정 지시문에 대한 사용자 지정 이벤트 작성

Question

사용자 지정 지시문 textareaInput을 구현하려고합니다. 하지만 지시어에 대한 사용자 지정 이벤트 구현 방법을 알지 못했습니다.

코드는 다음과 같습니다. 나는 아래처럼 사용하는보기에서

<div> 
    <textarea ></textarea> 
    <label> 
     <small></small> 
     <span >*</span> 
    </label> 
</div> 

: 같은

myApp.directive('textareaInput',function() { 
    var textareaInputDir = {}; 
    textareaInputDir.restrict="E"; 
    textareaInputDir.replace="true"; 
    textareaInputDir.templateUrl="../../../views/widget/textarea/textarea-template.html"; 
    textareaInputDir.scope={}; 
    textareaInputDir.link=function (scope, jqElement, attrs) { 
     scope.elementDefinition={}; 
     scope.elementDefinition.label=attrs.label; 
     scope.elementDefinition.isShow=attrs.isshow; 
     scope.elementDefinition.isRequired=attrs.isrequired; 
     scope.elementDefinition.isDisabled=(attrs.isdisabled === "true"); 
     scope.elementDefinition.defaultValue=attrs.defaultvalue; 
     scope.keyValue={text:scope.elementDefinition.defaultValue}; 

    }; 

    return textareaInputDir; 
}); 

템플릿 HTML 보인다. 아래 예에서. 내 지시어에 ng-change 이벤트를 추가하려고했습니다. 컨트롤러에 someMethod을 정의하려고합니다. testCtrl하지만이 이벤트는 템플릿의 루트 요소 (div입니다)에 첨부됩니다. 그래서 그것은 말이되지 않습니다. 왜냐하면 텍스트가 텍스트 영역에서 변경되었을 때 루트 요소는 그것을 알 수 없기 때문입니다. 그래서 지시문에 정의 된 모든 이벤트를 ng-change, ng-click 등과 같이 템플릿의 자식 요소 textarea에 연결할 수 있습니다. 그것을 만들 수있는 방법이 있습니까? 감사.

<form ng-controller='testCtrl'> 
    <textarea-Input label="Project Description" isShow="true" 
    isRequired="true" isDisabled="false" ng-change="someMethod()" ng-click="someClick()"></textarea-Input> 

</form> 

Answer 1

본인 스스로 시도하지는 않았지만 범위 문제가 있다고 생각합니다.

지시어 정의에 transclude: true을 사용하고 텍스트 영역 템플릿 내에 ng-change="someMethod()"을 사용해야합니다. 텍스트 영역 입력 템플릿에는 변경 이벤트를 실행할 수있는 많은 요소가 포함될 수 있습니다. ng-change 속성이이 속성을 모두 캡처합니까?

"Creating a Directive that Wraps Other Elements" in this long page of Angular JS docs에 대한 자세한 정보.

이 답변은 약 Angular JS directive scope issue에 대해 약간의 빛을 비춰 줄 것입니다.

Answer 2

먼저 범위 변수로 사용하여 onChange passed 함수를 가져와야합니다. 혼동을 피하기 위해 "inputChange"와 같은 이벤트 이름을 변경할 수도 있습니다. 그런 다음 textarea 요소를 가져 와서 콜백을 change 이벤트에 바인딩하십시오.

myApp.directive('textareaInput',function() { 
    var textareaInputDir = {}; 
    textareaInputDir.restrict="E"; 
    textareaInputDir.replace="true"; 
    textareaInputDir.templateUrl="../../../views/widget/textarea/textarea-template.html"; 
    textareaInputDir.scope= { 
     //isolated scope event, better change name anyway 
     ngChange: '&' 
    }; 
    textareaInputDir.link=function (scope, jqElement, attrs) { 
     scope.elementDefinition={}; 
     scope.elementDefinition.label=attrs.label; 
     scope.elementDefinition.isShow=attrs.isshow; 
     scope.elementDefinition.isRequired=attrs.isrequired; 
     scope.elementDefinition.isDisabled=(attrs.isdisabled === "true"); 
     scope.elementDefinition.defaultValue=attrs.defaultvalue; 
     scope.keyValue={text:scope.elementDefinition.defaultValue}; 

     //get the textarea element 
     var inputElement = jqElement.find('textarea'); 
     //listen for the change event 
     inputElement.bind('change', scope.ngChange); 

    }; 

    return textareaInputDir; 
}); 

이 그것을