angularjs – 在不传递范围的情况下编译模板

发布时间：2020-12-17 17:49:17 所属栏目：安全来源：网络整理

导读：题在AngularJS中,有没有办法在不使用范围或指令的情况下将字符串模板转换为标记？说明我有一项服务,允许我动态创建新的角度应用程序.它为新应用程序构建DOM,然后在元素上运行angular.boostrap. 目前,DOM是这样创建的： var element = document.createElem

题

在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>

希望这可以帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!