本篇主要介绍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. PyQt5教程——菜单和工具栏（3）

    PyQt5中的菜单和工具栏 在这部分的PyQt5教程中,我们将创建菜单和工具栏.菜单式位于菜单栏的一组命令操作.工具栏是应用窗体中由按钮和一些常规命令操作组成的组件. 主窗口 QMainWindow类 ...

  2. PHPWIND和DISCUZ什么区别？

    大家都知道,phpwind和discuz是两款用来做论坛的强大的php开源程序.客观的说,现在phpwind和discuz各有所长,要说他们哪个比较好,也是很难的事情,无忧主机小编在这里也不敢妄下结论 ...

  3. 解决 vue 的缩进问题 及 vue 的 sass 调用 mixin 函数

    1.解决 vue 的缩进问题 配置 eslint , 只要要eslint 对应的值为 0,则 eslint 将不会对其进行检测 (.eslintrc.js  --  rules ) A. 不检测 缩进 ...

  4. SQL 2008 R2数据库变为REPLICATION，日志不断增长并且不能截断和收缩的解决方式

     执行环境:windows server2003,sql server2008 R2,数据库上布置CDC   用户反应系统报错是日志已满,系统不能执行. 查看日志文件时.发现日志文件已经达到15G ...

  5. python第三方包的windows安装文件exe格式

    今天弄了一上午的python-ldap,发现要么安装vc,要么用其他比较麻烦的方法,都比较麻烦.幸好找到这个地址: http://www.lfd.uci.edu/~gohlke/pythonlibs/ ...

  6. grep -A -B -C

    Linux中grep/egrep查找命令 grep --color    ###颜色着重显示命中的文件及文件件 -n  ###显示行号  number -i   ###忽略大小写 ignore -c ...

  7. Python处理JSON(转)

    参考: 概念 序列化(Serialization):将对象的状态信息转换为可以存储或可以通过网络传输的过程,传输的格式可以是JSON.XML等.反序列化就是从存储区域(JSON,XML)读取反序列化对 ...

  8. HDUOJ------1711Number Sequence

    Number Sequence Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  9. UltraEdit打开中文乱码

    http://hellofs.blog.51cto.com/6109153/1187548 UltraEdit很强大,但是今天发现在打开含有中文的文本时会乱码,还是在配置里找找相关的设置,可以在如图的 ...

  10. 修改jQuery.validate验证方法和提示信息

    1.添加验证方法 在jquery.validate.js文件中直接添加验证方法,例如: jQuery.validator.addMethod("Specialstring", fu ...