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

但是我想传递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

将多个变量传递给Angular JS指令

1 个答案: