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

Passing more than one variable to Angular JS directive

本文关键字：Angular JS 指令 变量      更新时间：2023-09-26

我是编写指令的新手。 我有这段有效的代码，我正在尝试使其成为指令：

<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

最后一个非工作示例的问题不是传递多个参数，而是滥用角度的插值机制。如果您只想使用 variableName ，则使上一个代码示例工作(即折叠/展开(的最小更改是将模板从字符串更改为带有串联的函数：

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

但是，只要您使用指令隔离作用域，就没有必要这样做，这实际上向您隐藏了variableName的值。您可能还希望更改为 scope:false 并从模板函数的tAttr获取属性。修改后的示例。

相关文章：