AngularJS ng-bind-template 指令详解


Posted in Javascript onJuly 30, 2016

AngularJS ng-bind-template 指令

AngularJS 实例

<p> 元素上绑定两个表达式:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-bind-template="{{firstName}} {{lastName}}" ng-controller="myCtrl">

</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
 $scope.firstName = "John";
 $scope.lastName = "Doe";
});
</script>

</body>
</html>

运行结果:

         John Doe

定义和用法

ng-bind-template 指令用于告诉 AngularJS 将给定表达式的值替换 HTML 元素的内容。

当你想在 HTML 元素上绑定多个表达式时可以使用 ng-bind-template 指令。

语法

<element ng-bind-template="expression"></element>

所有的 HTML 元素都支持该指令。

参数值

描述
expression 一个或多个要执行的表达式,每个使用 {{  }} 包含。

以上就是对 AngularJS ng-bind-template 指令知识介绍,有需要的朋友看下。

Javascript 相关文章推荐
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
javascript html5实现表单验证
Mar 01 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
tsconfig.json配置详解
May 17 Javascript
vue 实现动态路由的方法
Jul 06 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 #Javascript
AngularJS ng-bind 指令简单实现
Jul 30 #Javascript
AngularJS ng-app 指令实例详解
Jul 30 #Javascript
如何检测JavaScript的各种类型
Jul 30 #Javascript
详解js中的apply与call的用法
Jul 30 #Javascript
javascript回到顶部特效
Jul 30 #Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 #Javascript
You might like
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
js网页版计算器的简单实现
2013/07/02 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
vue获取input输入值的问题解决办法
2017/10/17 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
讲解Python中的标识运算符
2015/05/14 Python
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
用Python实现职工信息管理系统
2020/12/30 Python
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
超市重阳节活动方案
2014/02/10 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
节约用电标语
2014/06/17 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
2014年副班长工作总结
2014/12/10 职场文书
八年级英语教学计划
2015/01/23 职场文书
总经理检讨书范文
2015/02/16 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书