转自：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. ZJOI—— 密码机（2003）

    ZJOI2003密码机,没找到可以测试的网站,就只过了样例~~ 题目描述 一台密码机按照以下的方式产生密码:首先往机器中输入一系列数,然后取出其中一部分数,将它们异或以后得到一个新数作为密码.现在请你 ...

  2. 基础数位DP小结

    HDU 3555 Bomb dp[i][0] 表示含 i 位数的方案总和. sp[i][0] 表示对于位数为len 的 num 在区间[ 10^(i-1) , num/(10^(len-i)) ] 内 ...

  3. Partition（hdu4651）2013 Multi-University Training Contest 5----（整数拆分一）

    Partition Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  4. 使用Ant打包Android应用具体解释

    计划写个完整的使用Ant打包Android应用的系列文章.三篇文章.首篇具体介绍採用Ant打包Android应用的流程.列出部分定制问题及其解决方法,第二篇介绍我理解的Ant打包的思路与主要的概念和使 ...

  5. CNN tflearn处理mnist图像识别代码解说——conv_2d参数解释，整个网络的训练，主要就是为了学那个卷积核啊。

    官方参数解释: Convolution 2D tflearn.layers.conv.conv_2d (incoming, nb_filter, filter_size, strides=1, pad ...

  6. zzulioj--1705--小明在工作(模拟水题)

    1705: 小明在工作 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 179  Solved: 59 SubmitStatusWeb Board De ...

  7. 百度编辑器UEditor修改成支持物理路径

    一.前言 我虽然工作了2年.有快1年没有做后台的开发了.最近要写个新项目用到富文本编辑器,然后选择用了百度的UEditor.在使用过程中感觉有些不太好.然后就自己手动改一下源码,写得不好请见谅.这只是 ...

  8. IEEE的论文需要注意的一些

    详细看最近的IEEE会议模板的时候,忽然注意到表的注序号应该用字母:另外,引用未发表的论文,如果是archive上的要使用archive规定的方法,或者标注``unpublished''

  9. JS 判断中英文字符长度

    function strlen(str) {        var len = 0;        for (var i = 0; i < str.length; i++) {          ...

  10. 通过curl获取网页访问时间

    curl -w %{time_namelookup}:%{time_connect}:%{time_starttransfer}:%{time_total}:%{speed_download}&quo ...