转自：https://www.cnblogs.com/best/tag/Angular/

1.

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

 </head>

 <body ng-app="">

 <div ng-init="myVar = 'http://www.runoob.com/wp-content/uploads/2014/06/angular.jpg'">

 <h1>Angular</h1>

 <img ng-src="{{myVar}}">

 </div>

 <p>该实例可以使用原生的 src 输出，但是使用 AngularJS 代码插入值，使用 ng-src 属性更好。</p>

 </body>

 </html>

2.

定义和用法

ng-src 指令覆盖了 <img> 元素的 src 属性。

如果你使用了 AngularJS 代码设置图片地址，请使用 ng-src 指令替代 src 属性。

ng-src 指令确保的 AngularJS 代码执行前不显示图片。

语法

<img ng-src="string"></img>

<img> 元素支持该属性。

参数值

值 描述
string 表达式返回的字符串。

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body ng-app="">
<div ng-init="myVar = 'http://www.runoob.com/wp-content/uploads/2014/06/angular.jpg'"><h1>Angular</h1><img ng-src="{{myVar}}"></div>
<p>该实例可以使用原生的 src 输出，但是使用 AngularJS 代码插入值，使用 ng-src 属性更好。</p>
</body></html>

48.AngularJS ng-src 指令的更多相关文章

  1. part 4 AngularJS ng src directive

  2. AngularJs -- 内置指令

    AngularJS提供了一系列内置指令.其中一些指令重载了原生的HTML元素,比如<form>和<a>标签, 当在HTML中使用标签时,并不一定能明确看出是否在使用指令. 其他 ...

  3. 使用Angularjs的ng-cloak指令避免页面乱码

    在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expr ...

  4. 走进AngularJs(五)自定义指令----（下）

    自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...

  5. 你知道用AngularJs怎么定义指令吗？

    前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...

  6. Ⅵ.AngularJS的点点滴滴-- 指令

    指令 基本用法 <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angul ...

  7. Angularjs 动态添加指令并绑定事件

    先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果: http://jsbin.com/gajizuyuju/edit?html,js,output var count=0 ...

  8. [转]你知道用AngularJs怎么定义指令吗？--很详细

    前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...

  9. AngularJS中的指令全面解析（转载）

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  10. 走进AngularJs(四)自定义指令----（中）

    上一篇简单介绍了自定义一个指令的几个简单参数,restrict.template.templateUrl.replace.transclude,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...

随机推荐

  1. 关闭 sftp

    vi /etc/ssh/sshd_config 注释掉这行Subsystem  sftp    /usr/libexec/openssh/sftp-server /etc/rc.d/init.d/ss ...

  2. node-webkit 主页面和 iframe 页通讯

    <html lang="en-US"> <head> <title>Hello World!</title> <style&g ...

  3. 黑马day14 过滤器概述&amp;生命周期&amp;运行过程

    过滤器:当訪问一个web资源的时候,过滤器就在你訪问这个web资源的前进行拦截...在放行过后...filter过滤器也能够做一些其它的事情. 编写过滤器的步骤: 1.写一个过滤器类实现filter接 ...

  4. 剪切具有CornerRadius的RectangleGeometry(可能在Ripple中用到）

    剪切具有CornerRadius的RectangleGeometry(可能在Ripple中用到) 1.新建Converter public class BorderClipConverter : IM ...

  5. [JZOJ NOIP2018模拟10.20 B组]

    T1:原根(math) 题目链接: http://172.16.0.132/senior/#contest/show/2532/0 题目: 题解: 一个数m原根的个数是$\phi{(\phi{(m)} ...

  6. [JZOJ NOIP2018模拟10.19]

    T1写炸了今天,期望70却落了个20...连链上的都没有写对 T3什么什么线段树分治套AC自动机,表示我完全自闭了,幸好考场上没有杠T3 总体比赛还是比较舒服,暴力分给的蛮足的,不像昨天那样 T1:林 ...

  7. BZOJ 3626 离线+树链剖分+线段树

    思路: 抄一波yousiki的- 显然,暴力求解的复杂度是无法承受的. 考虑这样的一种暴力,我们把 z 到根上的点全部打标记,对于 l 到 r 之间的点,向上搜索到第一个有标记的点求出它的深度统计答案 ...

  8. hbase的优化(全)

    高可用 在HBase中Hmaster负责监控RegionServer的生命周期,均衡RegionServer的负载,如果Hmaster挂掉了,那么整个HBase集群将陷入不健康的状态,并且此时的工作状 ...

  9. SparkShuffle调优原理和最佳实践

    在网络层,互联网提供所有应用程序都要使用的两种类型的服务,尽管目前理解这些服务的细节并不重要,但在所有TCP/IP概述中,都不能忽略他们: 无连接分组交付服务(Connectionless Packe ...

  10. （转载）Android平台下利用zxing实现二维码开发

    Android平台下利用zxing实现二维码开发 现在走在大街小巷都能看到二维码,而且最近由于项目需要,所以研究了下二维码开发的东西,开源的二维码扫描库主要有zxing和zbar,zbar在iPos平 ...