在AngularJS中将字符串视为模板

时间:2017-02-20 18:23:38

标签: javascript angularjs

如何利用变量中包含的字符串作为模板?

例如:

控制器

$scope.items = [
    {
         name: "Bruce Wayne"
    },
    {
         name: "Lucius Fox"
    }
];
$scope.template = "<input ng-model='item.name' type='text'>";

查看

<div ng-repeat="item in items">
    <div ng-bind-html="<!-- The `template` variable defined in the controller. -->">
    </div>
</div>

我尝试了$sce.trustAsHtml,在使用ng-model='item.name'之类的内容时,它只与实际范围无关。阅读$sce文档我不认为它提供了任何可以信任字符串作为模板的东西。

你可以使用fiddle

1 个答案:

答案 0 :(得分:2)

实际将数据从ng repeat绑定到输入需要编译html。为此,可以使用该指令

app.directive('dynamic', function($compile) {
    return {
        restrict: 'A',
        replace: true,
        link: function (scope, element, attrs) {
            scope.$watch(attrs.dynamic, function(html) {
                element[0].innerHTML = html;
                $compile(element.contents())(scope);
            });
        }
    };
});

<div ng-repeat="item in items">
   <div dynamic="template">
   </div>
</div>

$scope.items = [
    {
         name: "Bruce Wayne"
    },
    {
         name: "Lucius Fox"
    }
];
$scope.template = "<input ng-bind='item.name' type='text'>"; 

Demo