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 模板，这样 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

在angular我们曾经使用在你的控制器中(app.js)

$scope.price = "display some price";

在你的 html

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

angularJS {{variable}} can't be displayed in script tag