AngularJS ng-bind 指令简单实现


Posted in Javascript onJuly 30, 2016

AngularJS ng-bind 指令

AngularJS 实例

绑定 <p> 内的 innerHTML 到变量 myText:

<!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="" ng-init="myText='Hello World!'">

<p ng-bind="myText"></p>

</div>

</body>
</html>

运行结果:

Hello World!

定义和用法

ng-bind 指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。

如果给定的变量或表达式修改了,指定替换的 HTML 元素也会修改。

语法

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

或作为 CSS 类:

<element class="ng-bind: expression"></element>

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

参数值

描述
expression 指定要执行的变量或表达式。

以上就是对AngularJS ng-bind 指令的详细介绍,有需要的朋友可以参考下。

Javascript 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 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
避免jQuery名字冲突 noConflict()方法
Jul 30 #Javascript
分享jQuery封装好的一些常用操作
Jul 28 #Javascript
You might like
PHP 调试工具Debug Tools
2011/04/30 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
php的4种常用运行方式详解
2016/12/22 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
在python中做正态性检验示例
2019/12/09 Python
python 制作本地应用搜索工具
2021/02/27 Python
详解rem 适配布局
2018/10/31 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
毕业生造价工程师求职信
2013/10/17 职场文书
怎样写好自我鉴定
2013/12/04 职场文书
英语老师推荐信
2014/02/26 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
安全保证书范文
2014/04/29 职场文书
取保候审保证书
2014/04/30 职场文书
教师岗位职责
2015/02/03 职场文书
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android