Angularjs 从另一个指令触发指令

我有一个指令已经起作用了，一个页面上通常有多个指令，因此它使用独立的作用域“状态”来决定是否显示内容

<bdb-slideable state="expanded" duration="0.3">
   ...
   element content
   ...
</bdb-slideable>

我想在我的新指令中找到具有正确名称的bdb slideable实例，然后获取初始值“state”以正确设置插入符号，然后单击切换插入符号并根据需要设置bdb slideable的“state”值

所以我有一个关于切换的指令：

app.directive('bdbToggleSlideable', function() {

  function getTemplate(tElement, tAttrs) {
    return  '<div class="toggle" ng-transclude>' +
              '<span ng-class="{\'fa fa-caret-down\':!expanded,\'fa fa-caret-up\':expanded}"></span>' +
            '</div>'
  };

  function link(scope, element, attrs, ctrl, transclude) {

    scope.expanded = scope.target.state;    // ???

    element.bind('click', function() {
      scope.expanded = !scope.expanded;

    });
  }

  return {
      restrict: 'A'
    , scope: { target:'=bdbToggleSlideable'}
    , transclude: true
    , link: link
    , template: function (tElement, tAttrs) {
        return getTemplate(tElement, tAttrs);
    }
  }
});

因为state.target是未定义的，即使我定义了

scope:  { target:'=bdbToggleSlideable' } 

为了编译指令，这必须存在，所以我假设它现在确实知道如何找到指令，其中name=documentation，因此未定义为值

---

有没有人知道如何实现这一点，或者如何在另一个具有name=属性的指令上获取/设置“state”值

因此我重新编写了新指令，以如下方式工作：

app.directive('bdbToggleSlideable', function() {

  function getTemplate(tElement, tAttrs) {
    var state = tAttrs.state;
    return  '<div class="toggle" ng-click="'+state+'=!'+state+'">' +
              '<ng-transclude></ng-transclude>' +
              '<span ng-class="{\'fa fa-caret-down\':!'+state+',\'fa fa-caret-up\':'+state+'}"></span>' +
            '</div>'
  };

  return {
      restrict: 'E'
    , transclude: true
    , replace: true
    , template: function (tElement, tAttrs) {
        return getTemplate(tElement, tAttrs);
    }
  }
});

我使用下面的标记编译到我的页面中

<bdb-toggle-slideable state="expanded">
  <h4>Documentation</h4>
</bdb-toggle-slideable>
<bdb-slideable state="expanded" ng-init="expanded=true" duration="0.3">
  ...
  element content
  ...
</bdb-slideable>

在这个生成的标记中，toggle元素周围有一个额外的节点和一个额外的属性，但它接近于我想要生成的

<div class="toggle" ng-click="expanded=!expanded" state="expanded">
  <ng-transclude>
    <h4 class="ng-scope">Documentation</h4>
  </ng-transclude>
  <span ng-class="{'fa fa-caret-down':!expanded,'fa fa-caret-up':expanded}" class="fa fa-caret-up"></span>
</div>

我仍然必须确保切换和可滑动元素上的state=属性是相同的，并且它们在的范围内是唯一的，但是由于其要管理的代码稍微少一些，并且内部切换状态和插入符号在没有手动干预的情况下排列在一起，这比我所拥有的要好

当然，这并不完全是我想要实现的，但它是有效的

<h4 bdb-toggle-slideable="documentation" class="ng-isolate-scope">
  <div class="toggle" ng-transclude="">
    <span class="ng-scope">Test</span>
  </div>
 </h4>

'TypeError: Cannot read property 'state' of undefined'

scope:  { target:'=bdbToggleSlideable' } 

app.directive('bdbToggleSlideable', function() {

  function getTemplate(tElement, tAttrs) {
    var state = tAttrs.state;
    return  '<div class="toggle" ng-click="'+state+'=!'+state+'">' +
              '<ng-transclude></ng-transclude>' +
              '<span ng-class="{\'fa fa-caret-down\':!'+state+',\'fa fa-caret-up\':'+state+'}"></span>' +
            '</div>'
  };

  return {
      restrict: 'E'
    , transclude: true
    , replace: true
    , template: function (tElement, tAttrs) {
        return getTemplate(tElement, tAttrs);
    }
  }
});

<bdb-toggle-slideable state="expanded">
  <h4>Documentation</h4>
</bdb-toggle-slideable>
<bdb-slideable state="expanded" ng-init="expanded=true" duration="0.3">
  ...
  element content
  ...
</bdb-slideable>

<div class="toggle" ng-click="expanded=!expanded" state="expanded">
  <ng-transclude>
    <h4 class="ng-scope">Documentation</h4>
  </ng-transclude>
  <span ng-class="{'fa fa-caret-down':!expanded,'fa fa-caret-up':expanded}" class="fa fa-caret-up"></span>
</div>