在显示之前在 Angular 中编译字符串答案

【问题标题】：Compiling a String in Angular Before Displaying在显示之前在 Angular 中编译字符串
【发布时间】：2016-03-18 05:30:18
【问题描述】：

我有以下html：

<div ng-repeat="string in myStrings">
  <p>{{string}}</p>
</div>

像这样的字符串被添加到$scope.myStrings：

$scope.stringIwantToBeCompiled = 'I want to count to 4 via angular: {{2+2}}';

我希望字符串显示 4 而不是 {{2+2}} 角度表达式。

我通过$compile 尝试这样做是不是在这里叫错了树？如果没有，它是如何完成的？只是将其放入编译失败。我绝对必须在指令中这样做吗？

PLNKR FOR REFERENCE

【问题讨论】：

我需要在该字符串中放置提示页面刷新的 ng-click。 {{2+2}} 只是一个例子……是的，听起来我需要一个指令。
它不起作用的原因是因为您将 {{...}} 放在一个字符串中，这是一个变量。这被视为一个字符串，而不是作为 HTML 中的角度指令插入。
查看此链接，它可能会给您想要的答案：stackoverflow.com/questions/27291864/…
谢谢，正在查看。
可以不做吗？ $scope.stringIwantToBeCompiled = '我想通过角度数到 4：' + (2+2);还是要计算实际的字符串数？

标签： angularjs

【解决方案1】：

不确定您的确切目标是什么，但我可以想到两种无需编译即可完成此任务的方法：

1) 像这样拆分值：

<div ng-repeat="string in myStrings">
  <p>{{string}}{{mathValue}}</p>
</div>

在控制器中：

$scope.mathValue = 2+2;

2) 使用一个函数来返回字符串（我喜欢在我做任何非平凡的绑定的任何时候使用它）：

<div ng-repeat="string in myStrings">
  <p>{{stringFunction()}}</p>
</div>

在控制器中：

$scope.mathValue = 2+2;
$scope.stringFunction = function() {
    return 'I want to count to 4 via angular: '+$scope.mathValue;
};

【讨论】：

赞成，因为看起来我让人们感到困惑。 {{2+2}} 只是一个示例。我需要编译后的 html，该字符串通常会放在该位置。

【解决方案2】：

我不能 100% 确定您是只想计算 myStrings 数组中的字符串数，还是只是能够添加计数，但鉴于您的 Plunker，您可以执行以下操作：

要简单地添加两个变量，请更新以下行：

$scope.stringIwantToBeCompiled = 'I want to count to 4 via angular: ' + (2+2);

如果您想显示字符串的数量，请交换范围变量声明的顺序并显示 myStrings 长度

 $scope.myStrings = ['I am a string', 'I am another string', 'more strings!'];

 $scope.stringIwantToBeCompiled = 'I want to count to 4 via angular: ' + $scope.myStrings.length;

计算字符串只会给你 3，当然，因为数组中只有 3 个字符串。

这能解决你的问题吗？

更新

好的 - 所以我认为你想要的是字符串中的计数与 ng-click 对应的计数是否正确？

如果是这样，那么您的 ng-repeat 上的以下内容会这样做......

<p><a href="" ng-click="someMethod($index)">{{string}} {{$index}}</a>   </p>

使用 $index 可以为您提供重复项的索引。您始终可以将 1 添加到 $index 以使其从 1 开始，而不是从 0 开始：

<p><a href="" ng-click="someMethod($index)">{{string}} {{$index + 1}}</a>   </p>

【讨论】：

嘿，我正在重新发布我的评论：“我需要在该字符串中放置提示页面刷新的 ng-click。{{2+2}} 的东西只是一个例子.. .是的，听起来我需要一个指令”。感谢您的回复，但我正在寻找一种通过 Angular 将字符串编译为 html 的方法。看起来我开始做一些无聊的事情。
好的 - 根据您的评论稍微调整了我的答案。

【解决方案3】：

您可以将角度表达式 {{}} 附加到字符串中，例如：

$scope.stringIwantToBeCompiled = 'I want to count to 4 via angular: ' +  {{stuff or 2 + 2}};

或者使用 $compile Fiddle example

【讨论】：

【解决方案4】：

我真的需要使用带有 $compile 的指令，如下所示：

app.directive('dynamicAlert', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamicAlert, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});

http://plnkr.co/edit/bJPEyfkKsertulTN7rWp?p=preview

【讨论】：