Question

我正在尝试使用UI框架Search-Filter中的LumX，我承认这不是传统用法。

滤镜的工作方式是按下放大镜按钮opens;在控制器上调用方法openInput。鼠标单击会关闭它。

但是，我希望在点击opening时通过closing和toolbar__label span输入来扩展此内容，但我的Angular知识尚未达到标准。

我的HTML看起来像

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

如果打开github链接，则指令本身的ng-click为

ng-click="lxSearchFilter.openInput()"

我的问题是如何从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控制器？

Answer 1

您可以使用decorator

访问第三方指令的控制器/链接功能

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

您可以.decorator使用.controller，并将$provide.decorator的代码放在其中。

编辑：方法是使用decorator扩展它以支持以编程方式打开/关闭搜索

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

请注意，更改$delegate[0].scope仅在您拥有角度＆gt;时才有效1.5.1由于错误https://github.com/angular/angular.js/issues/14785

AngularJS - 访问第三方指令的控制器

1 个答案: