javascript - AngularJS 将 ng-bind-html 制作为动态构造的对象名称

Question

我需要在 HTML 代码中设置与动态创建的名称的绑定(bind)，例如:

<div ng-bind-html="MyVariable_{{counter}}">

在 Controller 中我使用以下代码:

        var the_string = 'MyVariable_' + p ;
        var MyHTML     = '<font size="' + p + '">This is text with size depending on the index</font>' ;

        var dummy = $parse(the_string);
        dummy.assign($scope, $sce.trustAsHtml(MyHTML));

澄清说明:HTML 中的{{counter}} 是传递给 JavaScript 代码的参数“p”。

问题似乎出在 HTML 中...AngularJS 不喜欢我在 HTML 中使用的语法(即 ="MyVariable_{{counter}}")。有什么办法可以实现这一点吗？

谢谢。

Answer 1

使用函数代替

ng-bind-html="getHtml(counter)"

你的 JavaScript 看起来像这样

function getHtml(counter) {
   return $scope['MyVariable_' + counter];
}