javascript - 有没有办法将变量传递给angularjs中的模板？

Question

我有一个 Angular 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。有没有办法将值传递给模板中的按钮变量？

附言好像我的问题不够清楚。我希望在不更改模板代码的情况下使用模板。如果我可以将 singleButton 绑定(bind)到 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>

应用程序.js

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

模板.html

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