angular学习笔记(十)

本篇主要介绍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学习笔记(十)

时间: 2024-10-12 22:36:49

angular学习笔记(十)的相关文章

angular学习笔记(十九)

本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器,服务,一样,可以通过模块实例的directive的方法来创建指令: var someModule = angular.module('SomeModule',[]); someModule.directive('directiveName',function(){ return { link: f

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

本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: 需要被检测的对象,可以是以下任意一种: 1. 某个数据,监测这个数据的值是否发生变化 2. 一条angular表达式,监测表达式的结果是否发生变化 3. 函数(),监测函数的返回值是否发生变化 注意,以上三种,无论是哪种,都应该是字符串格式,并且都是在$scope作用域下执行的. 4.函数,非字符

angular学习笔记(十二)

本篇主要介绍控制器: 控制器在前面的例子中已经大量的用到,它的作用主要是: 控制某块视图,通过$scope向这块视图提供数据,函数,并且监视需要被检测的部分,当发生变化时,做出相应的动作,从而起到控制该部分视图的作用 为了保持控制器的最小化和可管理,应该为视图中的每个功能都创建一个控制器,比如,有一个菜单,就创建一个menuController,有一个导航,就创建一个NavController... 控制器可以内嵌,比如: <div ng-controller = "ParentContr

angular学习笔记(三十)-指令(2)

本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: E 2. 属性: A 3. 样式类: C 4. 注释: M restrict的值可以是上面四个字母的任意一个或多个的组合. 不指定的话默认为A. 二. replace: 布尔值.是否将指令元素替换,可以有两个值: 1.true: 替换整个使用指令的元素 2.false: 不替换整个使用指令的元素,而

angular学习笔记(三十)-指令(1)

之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('directive-name',function(){ var obj = { restrict:'string', priority:number, template:'string', templateUrl:'string', replace:bool, transclude:bool or str

angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构

ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入angular-resource.min.js文件 2.在模块中依赖ngResourece,在服务中注入$resource var HttpREST = angular.module('HttpREST',['ngResource']); HttpREST.factory('cardResource

angular学习笔记(二十六)-$http(4)-设置请求超时

本篇主要讲解$http(config)的config中的timeout项: $http({ timeout: number }) 数值,从发出请求开始计算,等待的毫秒数,超过这个数还没有响应,则返回错误 demo: html: <!DOCTYPE html> <html ng-app = 'HttpGet'> <head> <title>18.4 $http(2)</title> <meta charset="utf-8"

angular学习笔记(三十)-指令(5)-link

这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数:scope,iEle,iAttrs,ctrl,linker scope:指令所在的作用域,这个scope和指令定义的scope是一致的.至于指令的scope,会在讲解scope属性的时候详细解释 iEle:指令元素的jqLite封装.(也就是说iEle可以调用angular封装的简版jq的方法和属

angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指令(5)-link文章也提到了link函数的第五个参数linker. 这篇文章就来讲解一下transclude()方法(linker()方法),是怎么使用的,另外,它也是compile函数的第三个参数,用法一样. 下面就通过自己写一个简易的模拟ngRepeat的指令cbRepeat,来了解linke