转自：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. php获取当前url地址的方法小结

    js 获取: top.location.href //顶级窗口的地址 this.location.href //当前窗口的地址 php获取当前url地址: #测试网址: http://localhos ...

  2. java 日期和字符串互转，依据当天整天时间 得到当天最后一秒的日期时间

    java 日期和字符串互转.依据当天整天时间   得到当天最后一秒的日期时间 package com.hi; import java.text.DateFormat; import java.text ...

  3. swift学习第四章

    // Playground - noun: a place where people can play import UIKit var age=100 //假设年龄不大于50的就会在这里断言,和之前 ...

  4. bzoj4808: 马 & bzoj3175: [Tjoi2013]攻击装置 (黑白染色+最小割)

    bzoj4808: 马 & bzoj3175: [Tjoi2013]攻击装置 题目:传送门 简要题意: 和n皇后问题差不多,但是这里是每个棋子走日子,而且有些格子不能放棋子.求最多能放多少个棋 ...

  5. CoreData 从入门到精通（三）关联表的创建

    上篇博客中讲了 CoreData 里增删改查的使用,学到这里已经可以应对简单的数据存储需求了.但是当数据模型复杂起来时,例如你的模型类中除了要存储 CoreData 里支持的数据类型外,还有一些自定义 ...

  6. 记录一下c++的一点指针所得

    c++有两种传值可以改变外部参数,一种是传递指针,另一种是传递引用,对于前者,可以用Ugly(but explicitly),对于后者,Clean(but hidden),在传递的时候有一种值得注意的 ...

  7. WIN32常用

    //1.设置窗口大小 MoveWindow(hWnd, , , + , + , FALSE); //放在InitInstance用于设置位置与窗口大小 //传递句柄就可以绘图 //2.双缓冲绘图模式 ...

  8. Hbase项目(完整版)

    涉及概念梳理:命名空间 4.1.1.命名空间的结构 1) Table:表,所有的表都是命名空间的成员,即表必属于某个命名空间,如果没有指定,则在default默认的命名空间中. 2) RegionSe ...

  9. PCL例程调试错误之缺少flann-config.cmake

    编译环境和PCL版本为:win7-x64 + MSVC2013 + PCL1.8.0-win32-MSVC2013. 调试PCL官网例程Cluster Recognition and 6DOF Pos ...

  10. js闭包详解－转自好友trigkit4

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包的特性 闭包有三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数 ...