在angularjs中动态添加带有绑定的html内容

Question

我有这样的输入：

<input type="text" ng-model="name">

还有一个放在作用域上的列表：

$scope.list = ["<span>{{name}}</span>","<span>{{name2}}</span>"]

我正在尝试使用 ng-repeat 遍历列表并显示所有列表元素，并在输入和跨度内容之间进行绑定。

<div ng-repeat="item in list" ng-bind-html-unsafe="item">
                    <span>{{$index + 1}}.</span>
                    <span ng-bind-html="to_trusted(item)"></span>
                </div>

地点：

$scope.to_trusted = function(html_code) {
        return $sce.trustAsHtml(html_code);
    }

这样做的正确方法是什么？ 谢谢。

Answer 1

如果你可以避免使用ng-bind-html，你最好使用ng-include作为模板， 在这里工作plunk。
喜欢这里：

html

<div ng-repeat="item in list" >
         ...//other things
        <span ng-include="'t1'"  ></span>
    </div>

模板

<script id="t1" type="text/ng-template">
      <span>{{item.name}}</span>
    </script>

控制器

$scope.list = [
      {name:"name1"},
      {name:"name2"},
      {name:"name3"}
      ];