將多個變量傳遞給Angular 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>

從面板按預期切換的意義上講，這是可行的。 我顯然沒有嘗試使用從html屬性傳遞的變量“ foobar”。 當我嘗試使用它時，代碼將引發錯誤並且切換不起作用。 我嘗試使用模板：

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

但是我也想通過屬性傳遞變量的名稱以供切換器使用，但這不起作用： http : //codepen.io/smlombardi/pen/KwzPaw

Answer 1

您上一個無效的示例的問題不在於傳遞多個參數，而是在於濫用角度的插值機制。 如果您只想使用variableName ，則使最后一個代碼示例正常工作（即折疊/展開）的最小更改是將模板從字符串更改為帶有串聯的函數：

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

但是，只要您使用指令isolate scope ，這樣做就沒有任何意義，它實際上對您隱藏了variableName的值。 您可能還想更改為scope:false ，而是從模板函數的tAttr獲取屬性。 修改示例 。