Передача нескольких переменных в Угловую директиву JS

Question

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

<div ng-click="details=!details" class="row toggleHeader" ng-class="{open : details}"> 
    <div class="col-md-12"> 
    <h4>Some title</h4> 
</div> 
</div> 

<div id="the-details" class="row" ng-show="details"> 
    <div class="col-md-2"> 
    ...content... 
</div> 
</div> 

Итак, мой первоначальный проход был

app.directive('pbTogglePanel', function() { 
     return { 
      restrict: 'A', 
      scope: { 
       variableName: '@', 
       panelTitle: '@' 
      }, 
      template: '<div ng-click="somevariable=!somevariable" class="row toggleHeader" ng-class="{open : somevariable}">\n<div class="col-md-12">\n<h4>{{panelTitle}}</h4>\n</div>\n</div>\n\n<div id="the-somevariable" class="row" ng-show="somevariable">\n<div class="col-md-2">\n...\n</div>\n</div>', 
     }; 
    }); 

с HTML

<div pb-toggle-panel panel-title="My Directive Panel Test" variable-name="foobar"></div> 

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

'<div ng-click="{{variableName}}=!{{variableName}}" class="row toggleHeader" ng-class="{open : {{variableName}}}">\n<div class="col-md-12">\n<h4>{{panelTitle}}</h4>\n</div>\n</div>\n\n<div id="the-{{variableName}}" class="row" ng-show="{{variableName}}">\n<div class="col-md-2">\n...\n</div>\n</div>' 

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

Итак, каков правильный способ привлечения более чем одного атрибута html?

Кроме того, целью было бы позволить содержимому этого DIV заменить ...content... заполнителем в моем шаблоне. Не знаю, как это пройти.

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

ПОМОЧЬ ПРОЯСНИТЬ Это работает: http://codepen.io/smlombardi/pen/MYygpy

Но я хотел бы передать имя переменной для Toggler использовать из атрибута тоже, и это не работает: http://codepen.io/smlombardi/pen/KwzPaw

Answer 1

Проблема вашего последнего, нерабочего примера заключается не в передаче нескольких параметров, а в злоупотреблении механизмом интерполяции углов. Если все, что вы хотите, чтобы использовать variableName, минимальное изменение, чтобы сделать ваш последний пример кода работы (то есть, чтобы свернуть/развернуть) будет изменить шаблон из строки для работы с конкатенации:

{... 
template: function(tElem, tAttr){return '<div ng-click="' + tAttr.variableName + '=!' + tAttr.variableName +...; 
} 

Но есть не имеет смысла делать это до тех пор, пока вы используете directive isolating scope, что эффективно скрывает от вас значение variableName. Вы также, вероятно, захотите изменить на scope:false и получить атрибуты от tAttr функции шаблона. Modified example.