有沒有辦法在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>