angularJS {{variable}}无法显示在脚本标记中

Question

<script type="text/template">
     <div class="abcd">
           <div class="efg" data-price="{{::displayPrice}}"></div>
     </div>
</script>

我有一个这样的模板，我需要将{{::displayPrice}}（范围内的变量）添加到div的数据价格部分。但是，div写在<script>标记中，导致其无效。

有人能告诉我怎么做吗？

Answer 1

您可以使用type="text/ng-template"将其转换为角度模板，这样angular将使用当前范围变量上的所有可用编译它：

<script type="text/ng-template" id"/my-template.html">
 <div class="abcd">
   <div class="efg" data-price="{{::displayPrice}}"></div>
 </div>

现在您可以将其用作路由器模板或ng-include="'my-template.html'"。

如果您无法更改模板类型，则可以在控制器中编译模板的HTML（例如使用jQuery和$compile服务），例如：

var yourAngularTpl = jQuery('[type="text/template"]').eq(0).html();
yourAngularTpl = $complie(yourAngularTpl)($scope);

确保注入了$scope和$complie并且您拥有jQuery（因为jQuery Light angular.element()是有限的）

Answer 2

我们曾经使用的角度 在你的控制器（app.js）

$scope.price = "display some price";

你的HTML中的

<div>{{price}}</div>