Question

我有以下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

Answer 1

我不是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而不是基于零：

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

Answer 2

不确定您的确切目标是什么，但我可以考虑两种方法来实现这一目标而不编译：

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;
};

Answer 3

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

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

或使用 $ compile Fiddle example

Answer 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

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

4 个答案: