本篇主要介绍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. uni-app - 如何打包

    H5,spa应用,必须在服务器环境下运行 多看官方文档,打包涉及到支付.以及各平台兼容性,通过 官方API链接如下: https://uniapp.dcloud.io/platform H5打包 An ...

  2. js随机码之乱序数组

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. eclipse导入web项目各种错误

    1.JavaWeb:报错信息The superclass "javax.servlet.http.HttpServlet" was not found on the Java Bu ...

  4. 【Maven】IKAnalyzer 在Maven Repository不存在

    1.在mvnrepository里面找IKAnalyzer,这个中文分词包,一直没有找到,找到github,发现是一个国人写的. http://mvnrepository.com/search?q=I ...

  5. 36个Android开发常用代码片段

    //36个Android开发常用代码片段 //拨打电话 public static void call(Context context, String phoneNumber) { context.s ...

  6. 使用fiddler来抓包

    使用fiddler来抓包 Sniffer,wireshark,WinNetCap.WinSock Expert,SpyNet 都是当前流行的抓包工具 需要先做一些简单的准备工作: 一台带有无线网卡的P ...

  7. Java 提示“找不到或无法加载主类” 解决方法

    1.检查环境变量配置,我的安装路径是F:\java\jdk1.8.0_91,因为是6以上版本,故不需配置Classpath 否则 CLASSPATH=.;%JAVA_HOME%\lib\dt.jar; ...

  8. 原创+转发：微信小程序navigator、redirectTo、switchTab几种页面跳转方式

    什么是事件? 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 详解(以常见的tap点击事情为例) 模板.wxml代码: <view id="tapTest ...

  9. PHP-多域名单点登陆方案

    1.只是二级域名不同(比如a.xx.com, b.xx.com) 利用cookie, 设置domain为".xx.com"即可 2.多个本域名都不相同(比如www.a.com, w ...

  10. 可以尝试用Google Font API来摆脱网页字体的单调 仅仅抛砖引玉

    http://www.nowamagic.net/librarys/veda/detail/2513