2016-07-12 3 views
0

UI 프레임 LumX에서 Search-Filter을 사용하려고하는데 이는 전통적인 방식으로 사용되지 않는다는 것을 인정합니다.AngularJS - 타사 지시문의 컨트롤러에 액세스

필터가 작동하는 방법은 돋보기 버튼 opens을 누르는 것입니다. 컨트롤러의 openInput 메서드를 호출합니다. 마우스를 클릭하면 닫힙니다.

toolbar__label span을 클릭하면 입력 한 내용을 openingclosing으로 확장하고 싶지만, 각도 지식은 아직까지 최고 수준이 아닙니다. 당신은 GitHub의 링크를 열면

<div class="toolbar" opensearch> 
    <span class="toolbar__label fs-title ml black__text" >{{ "content.search.tip" | translate }}</span> 
    <div class="toolbar__right"> 
    <lx-search-filter lx-width="400" lx-closed="true" > 
     <input type="text" ng-model="vm.searchFilter.third"> 
    </lx-search-filter> 
    <button class="btn btn--l btn--black btn--icon" lx-ripple> 
     <i class="mdi mdi-apps"></i> 
    </button> 
    </div> 
</div> 

이 지시어 자체의 ng-click 내 질문은

ng-click="lxSearchFilter.openInput()" 

처럼

내 HTML 내가 외부에서이 lxSearchFilter 컨트롤러에 액세스 할 수있는 방법을 찾습니다 lx-search-filter 지시문?

나는 그것이 작동하는 내 자신의 지시 opensearch와 내가 할 수있는 일의 좋은 오래된 JQuery와 방법을 사용하여 추가 같은 :

link: function(scope, element) { 
    element.bind('click', function(e) { 
    var btn = angular.element(e.target).parent().find('button')[0]; 
    if (!isOpen) { 
     isOpen = true; 
     angular.element(btn).trigger('click'); 
     } 
     return false; 
    }); 

이 두 가지주의 사항과 작업을 수행합니다

1. After a single open/close action I cannot reopen it 
2. It's not the Angular way?? 

그래서 다시를 내 질문은 lx-search-filter 지시문 외부에서이 lxSearchFilter 컨트롤러에 어떻게 액세스 할 수 있습니까?

답변

1

당신은 당신은 .controller 같은 .decorator를 사용하고 내부의 예에서 $provide.decorator의 코드를 넣을 수 있습니다 decorator

https://docs.angularjs.org/guide/decorators

를 사용하여 제 3 자 지침의 컨트롤러/링크 기능에 액세스 할 수 있습니다.


편집 : 방법은/$delegate[0].scope을 변경하면 단지 당신이 각> 1.5.1으로 인해이있을 때 작동 검색을

https://jsbin.com/siceyeqeza/edit?html,js,output

주를 닫 프로그래밍 방식으로 개방 지원을 확장 할 decorator을 사용하는 것입니다 버그에 https://github.com/angular/angular.js/issues/14785

+0

나는 그것을 더 잘 표현해야한다고 생각한다. lxSearchFilter.openInput() 함수를 트리거하고 수정할 필요가 없습니다. 내 지시문에서 어떻게 작동시킬 수 있습니까? –

+0

@ SamHammamy 업데이트 답변 – Icycool

+0

@lcycool 와우! 인상적. 나는 오늘 아침을 구현하고 완벽하게 작동합니다! 대단히 감사합니다 –

관련 문제