2016-07-12 4 views
0

Search-FilterをUIフレームワークLumXから使用しようとしていますが、これは伝統的な使用法ではないと認めています。AngularJS - 第三者指令のコントローラへのアクセス

フィルターが機能する方法は、虫めがねのボタンopensを押すことです。コントローラーのメソッドopenInputを呼び出します。マウスをクリックすると閉じます。

toolbar__label spanをクリックすると入力がopeningclosingになりましたが、私の角の知識はまだまだ終わりません。

私のHTMLを使用して、githubのリンクを開くと、ディレクティブ自体のng-click

ng-click="lxSearchFilter.openInput()" 

ある

<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> 

のように私の質問は、私は外からこの 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; 
    }); 

これは、2つの点に注意して動作します:だからもう一度

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

を使用して、サードパーティのディレクティブのコントローラ/リンク機能にアクセスすることができます。


編集:ところであなたは、角があるとき$delegate[0].scopeを変更するだけで動作することをサーチ

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

注意を閉じる/プログラム的に開いてサポートするためにそれを拡張するためにdecoratorを使用することです>による1.5.1バグにhttps://github.com/angular/angular.js/issues/14785

+0

私はそれをよりよく表現すべきだったと思います。つまり、lxSearchFilter.openInput()関数をトリガーし、変更しないことを意味します。自分の指示からどのように起動できますか? –

+0

@ SamHammamy更新の回答 – Icycool

+0

@lcycoolうわー!印象的。私は今朝実施し、完璧に動作します!ありがとうございました –

関連する問題