angularjs - 编译模板而不传递作用域

Question

题

在 AngularJS 中，有没有办法将字符串模板转换为标记 没有 使用 scope或指令？

解释

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

目前，DOM 是这样创建的:

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

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

通常我会使用 $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>

希望这可以帮助。