题
在AngularJS中,有没有办法在不使用范围或指令的情况下将字符串模板转换为标记？
说明
我有一项服务,允许我动态创建新的角度应用程序.它为新应用程序构建DOM,然后在元素上运行angular.boostrap.
目前,DOM是这样创建的：
var element = document.createElement('div');
element.setAttribute('app','');
element.setAttribute('size','small');
...
element.className = 'app layout--relative';
有许多属性,类,子元素等,因此以这种方式创建标记并不理想.最好使用模板.
通常我会使用$compile将字符串模板转换为标记,但因为我还没有运行angular.bootstrap,所以没有范围可以使用$compile(template)(范围);
我试过了什么
创建一个div,然后用模板字符串替换innerHTML
var element = document.createElement('div');
element.innerHTML = template;
模板编译后删除范围
这有效,但我更愿意完全避免范围：
var scope = $rootScope.$new(); var element = $compile(template)(scope); scope.$destroy();
解决方法
您可以使用$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>
希望这可以帮助.
