使用 AngularJS 将附加参数传递给模板答案

【问题标题】：Pass additional parameter to template using AngularJS使用 AngularJS 将附加参数传递给模板
【发布时间】：2014-03-31 17:24:33
【问题描述】：

我有以下指令：

app.directive("actTemplate", function() {
return {
    restrict: 'A',
    templateUrl: "/views/myTemplate.html"
};
});

我怎样才能将附加参数传递给 myTemplate 所以：

<div>
{{aditionalParam}}

...

</div>

取值？

【问题讨论】：

标签： javascript angularjs angularjs-directive parameter-passing

【解决方案1】：

定义

app.directive("actTemplate", function() {
  return {
    restrict: 'A',
    templateUrl: "/views/myTemplate.html"
    scope: {
      foo: '=boo'
    }
  };
});

模板

<div>
  {{foo}}
</div>

使用

<actTemplate boo="lalala" />

【讨论】：

【解决方案2】：

你必须指定你的指令应该创建它的内部范围。然后可以以单绑定或双绑定方式共享范围变量（请参阅directive scope binding doc）

app.directive("actTemplate", function() {
    return {
        restrict: 'A',
        scope: {
            additionalParam: '='
        },
        template: "<div>{{additionalParam}}</div>"
    };
});

然后用这个虚线语法“调用”你的指令：

<div act-template additional-param="foobar">

您可以像 jsfiddle example 那样进行单向绑定（控制器 -> 指令）。

或双向数据绑定（控制器指令），如this one。

【讨论】：