本篇主要介绍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. 借助AWR报告分析解决oracleCPU过高的问题（转）

    原文地址:http://www.cnblogs.com/crystal-guoguo/p/4213458.html 简介:在oracle数据库中,有两个非常实用的自带监控工具EM(Enterprise ...

  2. windows XP系统搜索无线网络时提示“windows无法配置此无线连接”,如何处理？

    转自:http://support1.lenovo.com.cn/lenovo/wsi/htmls/detail_12839009034375918.html 文章编号:C191612     201 ...

  3. 【剑指offer】二分查找二维数组

    1 2 3 4 5 6 7 8 9 3 3 1 2 3 4 5 6 7 8 9 10 3 3 12 2 3 4 5 6 7 8 9 10 例子输出: Yes No No 时间限制:1 秒 内存限制:3 ...

  4. MySQL工具1：mysqladmin

    每两秒显示一下MySQL的状态,一共显示5次. # mysqladmin -uroot -p -i 2 -c 5 status 查看MySQL的运行状态: #mysqladmin -uroot -p ...

  5. java 动态生成类再编译最后代理

    package spring.vhostall.com.proxy; public interface Store { public void sell(); } ------------------ ...

  6. 〖Windows〗Linux的Qt程序源码转换至Windows平台运行，编码的解决

    在中国大陆,Windows默认的编码是gb2312,而Linux是UTF8: 多数情况下,把Linux上的程序转换至Windows上运行需要进行编码转换才能正常显示: 而其实大可以不必的,同样,文件使 ...

  7. 【环境配置】配置ndk

    1. 背景 Android平台从诞生起,就已经支持C.C++开发. 众所周知,Android的SDK基于Java实现.这意味着基于Android SDK进行开发的第三方应用都必须使用Java语言.但这 ...

  8. mybatis标签之——关联映射

    关联关系是面向对象分析.面向对象设计最重要的知识.合理的关联映射将大大简化持久层数据的访问.关联关系大致分为以下三类: 一对一 一对多 多对多 1. 一对一 一对一关系推荐使用唯一主外键关联,即两张表 ...

  9. Nginx中Laravel的配置

    server { listen 80; server_name sub.domain.com; set $root_path '/var/www/html/application_name/publi ...

  10. Android 布局详解 -三表格布局（TableLayout）以及重要属性

              TableLayout跟TableRow 是一组搭配应用的布局,TableLayout置底,TableRow在TableLayout的上方,而Button.TextView等控件就 ...