在这种情况下,您不想只“插入HTML”,而是对其进行编译。您可以使用该$compile服务创建DOM节点。

var tpl = $compile( '

{{each}}

' )( scope );

如您所见,$compile返回一个函数,该函数将范围对象作为参数,对代码进行评估。生成的内容可以使用插入到DOM中element.append()。

重要说明:但是在任何情况下,控制器中都不会包含任何与DOM相关的代码。适当的地方始终是指令。可以将这些代码轻松地放入指令中,但是我不知道为什么您要以编程方式完全插入HTML。

您能否在这里阐明一些信息,以便我提供更具体的答案?

更新资料

假设您的数据来自服务:

.factory( 'myDataService', function () {

return function () {

// obviously would be $http

return [ "Apple", "Banana", "Orange" ];

};

});

您的模板来自服务

.factory( 'myTplService', function () {

return function () {

// obviously would be $http

return '

{{item}}

';

};

});

然后,您创建一个简单的指令,该指令读取提供的模板,对其进行编译,然后将其添加到显示中:

.directive( 'showData', function ( $compile ) {

return {

scope: true,

link: function ( scope, element, attrs ) {

var el;

attrs.$observe( 'template', function ( tpl ) {

if ( angular.isDefined( tpl ) ) {

// compile the provided template against the current scope

el = $compile( tpl )( scope );

// stupid way of emptying the element

element.html("");

// add the template content

element.append( el );

}

});

}

};

});

然后从您的角度来看:

Show the Content

在控制器中,您只需将其捆绑在一起:

.controller( 'MyCtrl', function ( $scope, myDataService, myTplService ) {

$scope.showContent = function () {

$scope.items = myDataService(); //

$scope.template = myTplService();

};

});

它应该一起工作!

PS:这都是假设您的模板来自服务器。如果不是,则您的模板应位于指令中,这可以简化操作。

js模板字符串嵌套html,在元素内插入一个有角度的js模板字符串相关推荐

  1. 成功解决在excel表格中仅在某列内插入一个空白单元格,使其下部的数据整体下移一格

    成功解决在excel表格中仅在某列内插入一个空白单元格,使其下部的数据整体下移一格 目录 解决问题 解决方法 解决问题 在excel表格中仅在某列内插入一个空白单元格,使其下部的数据整体下移一格 解决 ...

  2. Java黑皮书课后题第6章:*6.20(计算一个字符串中字母的个数)编写一个方法,使用下面的方法体计算字符串中的字母个数。编写一个测试程序,提示用户输入字符串,然后显示字符串中的字母个数

    6.20(计算一个字符串中字母的个数)编写一个方法,使用下面的方法体计算字符串中的字母个数.编写一个测试程序,提示用户输入字符串,然后显示字符串中的字母个数 题目 题目描述 破题 代码 运行示例 题目 ...

  3. polymer 绑定html元素,使用在Polymer元素内的light dom中定义的模板

    我正在尝试将模板从DOM移动到元素内部. 这是我的要素: BOOM Polymer('bt-sortable-list', { ready: function() { var div = docume ...

  4. JS实现数组去重(重复的元素只保留一个)

    1.遍历数组法 它是最简单的数组去重方法(indexOf方法) 实现思路:新建一个数组,遍历去要重的数组,当值不在新数组的时候(indexOf为-1)就加入该新数组中: var arr=[2,8,5, ...

  5. 树形json扁平化,一维数组树状化,对象深拷贝,元素后插入新元素,格式或动态路由等常用js合集

    索引 一.在元素后面插入一个新的元素. 二.对象或者数组的深拷贝. 三.从服务器端获取到动态路由表的格式化. 四.json树形数据扁平化处理(变成一维数组) 五.一维数组转化为树状结构对象. 六.防抖 ...

  6. java替换最后一个字符_Excel公式技巧23: 同时定位字符串中的第一个和最后一个数字...

    学习Excel技术,关注微信公众号: excelperfect 在很多情况下,我们都面临着需要确定字符串中第一个和最后一个数字的位置的问题,这可能是为了提取包围在这两个边界内的子字符串.然而,通常的公 ...

  7. java 字符串每隔两位插入一个字符

    需求:如何将一个字符串每隔两位就插入一个字符,末尾不加. 输入参数:147dba2630d74228af63c97bbaf9eacd 输出结果:14:7d:ba:26:30:d7:42:28:af:6 ...

  8. js 模板字符串 嵌套

    原文链接: js 模板字符串 嵌套 上一篇: react input 双向绑定 下一篇: es6 标签模板字符串 使用模板字符串渲染一个列表 <!DOCTYPE html> <htm ...

  9. 为什么p元素内不能嵌套Div元素(随笔)

    在说明这个问题之前,我们先来回顾一个块级元素与内联:我们知道 内联元素可以嵌套内联元素,块级元素可以嵌套部分块级元素并也能嵌套内联元素,但内联元素不能嵌套块级元素.块级元素为block,内联元素为in ...

最新文章

  1. 表格中td限宽溢出以省略号代替
  2. 算法分析与设计——蛮力法0/1背包
  3. Python面试题40问
  4. ASP.NET中添加View与Razor引擎以及View解析和Controller向View传值
  5. JAVA Web学习篇--Servlet
  6. docker之es+es-head+kibana+ik分词器安装
  7. 对C#开发两个基本原则的深入讨论
  8. RLE压缩及优化--图片压缩
  9. 灰度实战(一):Apollo配置中心(1)
  10. opencv 学习之 亮度检测
  11. java学习笔记_Java大白话学习笔记(01)—数组以及内存图解
  12. Java后台获取Cookie
  13. Jrebel激活破解
  14. 8086汇编语言:8086CPU的各个引脚的功能讲解
  15. 复工后的前端学习建议,非常实用!
  16. method ID not in [0, 0xffff]: 65536” error解决办法
  17. iOS动画进阶(五)变换
  18. get.(Calendar.HOUR_OF_DAY)、get(Calendar.HOUR)的区别
  19. 北京楼市:一个打死都不说的秘密
  20. tensorflow训练自己的声音数据集进行声音分类

热门文章

  1. 手机使用FTP连接电脑,下载电脑中的文件
  2. java 中文域名解析idn_中文域名 原理剖析
  3. 【R】【线性回归分析实验】
  4. Win10封装常见问题和解决办法
  5. 舆情系统实战——思路
  6. 【多径信道】多径信道的simulink仿真
  7. 指针空间的申请和释放
  8. 计算机英语学科总结,英语组学科活动总结
  9. 用友t3服务器怎么修改密码,用友T3软件修改密码
  10. 基于java+jsp的酒店预订系统