转自：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. 洛谷——P1352 没有上司的舞会

    https://www.luogu.org/problem/show?pid=1352#sub 题目描述 某大学有N个职员,编号为1~N.他们之间有从属关系,也就是说他们的关系就像一棵以校长为根的树, ...

  2. java去除反复的字符串和移除不想要的字符串

    在java开发中碰到了有些字符串是反复的,假设在进行业务处理要所有遍历太对的数据就会反复,所以在进行业务处理前进行一个去重操作. watermark/2/text/aHR0cDovL2Jsb2cuY3 ...

  3. JQuery与CSS之图片上放置button

    position:relative日常应用的时候通常是设置给position:absolute;的父层的, 父层position:relative; 子层position:absolute;的话, 就 ...

  4. Linux 截图

    方法一:快捷键截图 对整个屏幕截图: PrintScreen 对活动窗体截图: Alt+PrintScreen 对随意矩形截图: Shift+PrintScreen 以上三个快捷键再加上Ctrl.就会 ...

  5. cloudstack给已有zone加入物理网络

    默认情况下,假设zone建立完后.cloudstack是不提供加入物理网络接口的. 基础架构- 域 - 物理网络 以下仅仅有我们创建zone的时候加入的物理网络 假设想在这个基础上加入一个物理网络是没 ...

  6. iOS开发之十万个为什么&lt;1&gt;

    郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助.欢迎给作者捐赠,支持郝萌主,捐赠数额任意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 游戏官方下 ...

  7. 在Visual Studio Code中使用C#以及.net core

    Working with C# Using .NET Core in Visual Studio Code Note: VS Code does not support debugging appli ...

  8. html 移动端关于长按图片弹出保存问题

    在做html5项目的时候有个需求是要拖动一个图片,但是又不要用户长时间按着弹出保存框.首先想到的就是在点图片的时候阻止默认事件的发生: js停止冒泡· function myfn(e){ window ...

  9. 你不知道的JavaScript（十一）函数参数

    JavaScript函数的定义和使用非常简单,我们看一下下面的代码: <script type="text/javascript"> var sum = functio ...

  10. 【原创】Spring连接、事务代码分析

    1.JdbcTemplate     当不使用事务时,jdbcTemplate的模板类,通过     Connection con = DataSourceUtils.getConnection(ge ...