Директива по запуску из другой директивы

Question

У меня есть директива, которая уже работает, и на странице часто бывает несколько страниц, поэтому для определения того, отображается ли содержимое или нет, используется изолированное поле «состояние».

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

существуют различные другие элементы страницы, которые действуют в качестве триггеров для директив, в данном случае это может быть ярлык документации, поэтому я бы обернуть это с чем-то справиться с кнопкой мыши и пролетом, чтобы показать правильный вверх или вниз в зависимости от состояния.

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

и это все работает, Буц свою работу, добавив, и я должен следить за то, что переменная состояния я использую и на больших страницах (или там, где я тяну в шаблонах это становится грязным). Кроме того, элементы или набор элементов, которые необходимо обернуть, не всегда являются и могут быть любым текстом или разметкой.

Я пытался добавить директиву через атрибут к элементу, который будет использоваться в качестве триггера переключения, и он будет управлять правильным отображением каретки и вводить все соответствующие классы.

<h4 bdb-toggle-slideable="documentation">Documentation</h4> 

, а затем добавьте имя атрибута к BDB-скользящим, что соответствует Подвижный, которая будет переключать.

<bdb-slideable name="documentation" state="expanded" duration="0.3"> 

My первоначально поставленных публично разоблачения «государство» через изолированную сферу два путь связывания,

return { 
    restrict: 'E', 
    scope: { expanded:'=state' }, 
    ... 
    rest of directive 
    ... 
}; 

Я хочу, чтобы как-то в моей новой директиве, чтобы найти экземпляр BDB-может скользить, которая имеет правильное название а затем получить начальное значение «состояния», чтобы правильно настроить каретку, а затем щелчки переключали каретку и устанавливали значение «состояние» bdb-скольжения по мере необходимости.

Так что я эту директиву для переключения:

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); 
    } 
    } 
}); 

Таким образом, есть по крайней мере две вещи неправильно с этим.

Результат, который был сгенерирован шаблоном, не обертывал H4 с помощью div и затем вставлял span (я бы хотел, чтобы он сгенерировал тот же формат, что и мой ручной обернутый элемент, показанный выше), он сгенерировал это:

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

потому что state.target не определено и нет ссылки на цели в изолированном состоянии директивы, хотя я определила

scope: { target:'=bdbToggleSlideable' } 

, и это должно было существовать для того, чтобы директива была скомпилирована, поэтому я предполагаю, что она знает теперь, чтобы найти директиву, где name = «documentation», и поэтому получает неопределенное значение.

Есть ли у кого-нибудь идеи, как достичь этого, или как получить/установить значение «состояние» в другой директиве с атрибутом name = "?

Answer 1

Так что я переписал новую директиву, чтобы работать так:

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> 

Я до сих пор, чтобы убедиться, что состояние = «» атрибуты одинаковы как на тумблер и скольжением элементов и что они уникальны в рамках, но его немного меньше кода для управления и внутреннее состояние переключения и каретка выстраиваются в линию без ручного вмешательства, это лучше, чем у меня.

Это, конечно, не то, чего я хотел достичь, но он работает.