本篇主要介绍angular中图片的src和链接的href的处理:

用到了以下两个属性:

ng-src: 绑定了数据的路径表达式

ng-href: 绑定了数据的路径表达式

例如:

<!DOCTYPE html>

<html ng-app>

<head>

  <title>7.1src和href</title>

  <meta charset="utf-8">

  <script src="../angular.js"></script>

  <script src="script.js"></script>

  <style type="text/css">

    *{

      font-family:'MICROSOFT YAHEI';

      font-size:12px

    }

  </style>

</head>

<body>

<div ng-controller = "SrcHref">

  <img ng-src="./images/cats/{{favorite}}"/>

  <a ng-href="./images/cats/{{favorite}}">查看</a>

</div>

</body>

</html>
function SrcHref ($scope){

    $scope.favorite = 'xiaohei.gif';

}

显示效果:

点击查看后会跳转到图片的路径

*虽然说,使用这种方法也能绑定路径:

  <img src="./images/cats/{{favorite}}"/>

  <a href="./images/cats/{{favorite}}">查看</a>

但这不是最佳方法,有时候会无法运行.原因不需要去理解.记住就可以了.

angular学习笔记(十)-src和href处理的更多相关文章

  1. 【转】angular学习笔记(十四)-$watch(1)

    本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...

  2. angular学习笔记(十四)-$watch(1)

    本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...

  3. angular学习笔记(十五)-module里的'服务'

    本篇介绍angular中的模块:module 在笔记(二)http://www.cnblogs.com/liulangmao/p/3711047.html里已经讲到过模块,这篇主要讲模块的 '服务' ...

  4. angular学习笔记(十九)-指令修改dom

    本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器 ...

  5. angular学习笔记(十六) -- 过滤器(2)

    本篇主要介绍angular自定义的过滤器: 直接看例子: <!DOCTYPE html> <html ng-app="MyFilter"> <head ...

  6. angular学习笔记(十六) -- 过滤器(1)

    本篇主要介绍过滤器的基本用法: 过滤器用来对数据进行格式的转换,数据格式的转化与逻辑无关,因此,我们使用过滤器来进行这些操作: {{... | filter2: 参数1,参数2... }} expre ...

  7. angular学习笔记(十四)-$watch(3)

    同样的例子,还可以这样写: <!DOCTYPE html> <html ng-app> <head> <title>11.3$watch监控数据变化&l ...

  8. angular学习笔记(十四)-$watch(2)

    下面来看一个$watch的比较复杂的例子: 还是回到http://www.cnblogs.com/liulangmao/p/3700919.html一开始讲的购物车例子, 给它添加一个计算总价和折扣的 ...

  9. angular学习笔记(十四)-$watch(4)

    如果需要同时监测多个属性或者对象,并且执行的是同样的回调,可以有两种选择: 1. 监测这些属性连接起来之后的值: $scope.$watch('objOne.a+objTwo.b+...', watc ...

随机推荐

  1. Java监控工具

     1. jmap 查看heapdump 2. jstack         查看javacore 3.jps        列出jvm进程 4.jstatd      启动jvm监控服务.它是一个基于 ...

  2. VS2015 正式版中为什么没有了函数前面引用提示了？

    HttpClient _httpClient = new HttpClient(); var clientId = Config.GetValue("AuthUser"); var ...

  3. 手动脱NsPacK壳实战

    作者:Fly2015 这里脱壳的程序是吾爱破解培训的作业2,相较于作业1略微要强一点,可是仅仅要掌握了脱壳的ESP定律,脱这个Nspack壳并不难.只是还是蛮有意思的. 1.使用查壳软件对加壳的程序进 ...

  4. 虚拟机安装的Winserver 2008 R2系统，宿主机无法ping通主机

    新安装的虚拟机,在虚拟机中安装了Winserver2008 R2系统,网络适配器已经设置为桥接模式(自动) 刚开始的几天很正常,但是过了几天后,发现连接不了了,后来才发现是因为网络问题. 解决方案:修 ...

  5. IDEA 开发环境中 调试Spark SQL及遇到问题解决办法

    1.问题 java.lang.OutOfMemoryError: PermGen space java.lang.OutOfMemoryError: Java heap space // :: WAR ...

  6. oracle10-11数据库下载

    Oracle数据库官方下载,需要注册oracle账号,方可下载! 11G 7个压缩包含义: p102025301120——Linux-x86-64_1of7.zip             datab ...

  7. js ie下有效 showModalDialog 、showModelessDialog

    <input type="button" value="打开选择输入框"/> <script type="text/javascri ...

  8. 2017年WorkApplication牛客网线上机试题

    WorkApplication是一家日企,主要办公地在东京.新加坡.上海等地. 第一题:n的全排列中有多少个排列逆序数为k 输入两个数字n,k,两个数字的范围都是[1,1000]. 输出:n的全排列中 ...

  9. PowerDesigner删除外键关系,而不删除外键列[转]

    PowerDesigner中配置外键关系时,如果要删除配置的外键关系,默认设置会一同删除外键列. 要更改此设置,需在菜单栏tools中打开Model Options,在Model Settings中点 ...

  10. JMeter学习笔记--详解JMeter逻辑控制器

    JMeter使用逻辑控制器来决定采样器的处理顺序 简单控制器(Simple Controller):存储设备(将某些采样器归组) 循环控制器(Loop Controller:设置循环次数 仅一次控制器 ...