둘 이상의 변수를 Angular JS 지시문에 전달

Question

지시어를 처음 사용합니다. 그래서, 내 초기 패스는 HTML

<div pb-toggle-panel panel-title="My Directive Panel Test" variable-name="foobar"></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>', 
     }; 
    }); 

했다

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

: 나는 작품이 코드 조각을하고 난 그에게 지시를 만들기 위해 노력하고 있어요 , 패널이 예상대로 전환됩니다. 나는 분명히 을 사용하려고 시도하지 않았다. 변수 "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.