编译模板而不传递范围

Question

问题

在AngularJS中，是否可以使用scope或指令将字符串模板转换为标记而不使用？

说明

我有一项服务，允许我动态创建新的角度应用程序。它为新应用程序构建DOM，然后在元素上运行angular.boostrap。

目前，DOM的创建方式如下：

var element = document.createElement('div');
element.setAttribute('app', '');
element.setAttribute('size', 'small');
...
element.className = 'app layout--relative';

有许多属性，类，子元素等，因此以这种方式创建标记并不理想。 最好使用模板。

通常我会使用$compile将字符串模板转换为标记，但由于我还没有运行angular.bootstrap，因此没有scope才能使用$compile(template)(scope);

我尝试了什么

创建一个div，然后将innerHTML替换为模板字符串

这样可行，但根元素上的所有属性和类都需要单独添加。

var element = document.createElement('div');
element.innerHTML = template;

在模板编译后删除范围

这样可行，但我更愿意完全避免使用范围：

var scope = $rootScope.$new();
var element = $compile(template)(scope);
scope.$destroy();    

Answer 1

您可以使用$interpolate服务进行字符串替换，如下所示：

var template = '<div app size="{{size}}" class="{{className}}">' +
                 '<span>Hello {{name}}!</span>' +
               '</div>';

$interpolate(template)({
  size: 'small',
  className: 'app layout--relative',
  name: 'World'
});

结果如下：

<div app size="small" class="app layout--relative">
  <span>Hello World!</span>
</div>

希望这有帮助。