有没有办法在angularjs中将变量传递给模板？

Question

我有一个角度js模板，我通过ng-repeat调用来创建按钮。

<script type="text/ng-template" id="button.angular.template"> 
    <div class="in-page-button" ng-if="button.mode == '' || button.mode == undefined"><<button.text>></div> 
    <a class="in-page-button" href="<<button.targetURL>>" target="_blank" ng-if="button.mode == 'external'"><<button.text>></a> 
    <a class="in-page-button" href="" ng-click="changePage(button.internalLink)" target="_blank" ng-if="button.mode == 'internal'"><<button.text>></a> 
</script> 

<!-- some other code --> 
<div ng-repeat="(key, button) in buttons" ng-include="button.angular.temlate"> 
<!-- some other code --> 

它运行良好，但现在我想使用该模板来创建单个按钮了。假设模型被称为singleButton。有没有办法将值传递给模板中的按钮变量？

P.S.似乎我的问题不够清楚。我希望在不更改模板代码的情况下使用该模板。如果我可以将singleButton与button绑定，那么我可以直接重新使用该模板。实际的模板比3行要长得多，所以如果我需要更改模板，它会花费很多时间。

Answer 1

您可以将singleButton作为$ scope.button添加到您的作用域中。在ng-repeat内部，你的模板将使用循环变量'button'，但在其之外它将使用$ scope.button。

下面是一个plunkr表示这个动作：

http://plnkr.co/edit/fkUQ9vm2AxO1m1Ul3g8t?p=preview

的index.html

<p>Start repeats</p> 
<div ng-repeat="name in names" ng-include src="'template.html'"></div> 
<p>End repeats</p> 

<div ng-include src="'template.html'"></div> 

app.js

app.controller('MainCtrl', function($scope) { 
    $scope.names = ['Earth', 'Planet', 'Bote']; 
    $scope.name = 'World'; 
}); 

template.html

<p>Hello {{name}}!</p>