【学】AngularJS日记（2）
- 数组循环放到新生成的
li中
<ul ng-init="arr=[12,5,6,394,344]">
<li ng-repeat="item in arr">{{item}}</li>
</ul>
<!--这里的item只是个变量，名字随意，只的是循环数组中的每一项数据-->
- 也可以加入数组的下标
<ul ng-init="arr=[12,5,6,394,344]">
<li ng-repeat="(index,value) in arr">{{index}}={{value}}</li>
</ul>
<!--记得要加括号，另外第一个参数是下标，第二个参数是每个下标对应的数据-->
- 当然，循环json也是没有问题的
<ul ng-init="json={'a':'abc','b':123,'c':'hello'}">
<li ng-repeat="(key,value) in json">{{key}}={{value}}</li>
</ul>
<!--第一个参数是键，第二个参数是值，需要注意的是，既然ng-init后面用了双引号，那json里只能都用单引号了，如果还用双引号就会出错-->
- 稍微复杂的例子
<ul ng-init="arr=[{'name':'Victor','age':33},{'name':'Mary','age':30},{'name':'Qinyu','age':4}]">
<li ng-repeat="item in arr">{{item.name}}:{{item.age}}岁</li>
</ul>
- 一个页面可以有很多Module,比如轮播图是个模块，导航是个模块，搜索是个模块，而一个模块下可以有很多controller
<html ng-app="test"> <!--这里是module模块的名字-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script src="angular.1.5.8.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
var app = angular.module('test',[]); //定义一个名字为app的模块，在这个例子中app放在了<html>上，所以整个页面都受这一个module控制
app.controller('cont1',function($scope){ //在这个app模块上定义了一个controller，名字是cont1
$scope.a = 12; //在cont1控制器中定义了一个变量a
});
app.controller('cont2',function($scope){ //在这个app模块上定义了一个controller，名字是cont2
$scope.b = 5; ////在cont2控制器中定义了一个变量b
});
</script>
</head>
<body >
<div ng-controller="cont1"> <!--//只有在cont1控制下的元素能访问到a变量-->
<span>{{a}}</span>
</div>
<div ng-controller="cont2"> <!--//只有在cont2控制下的元素能访问到b变量-->
<span>{{b}}</span>
</div>
</body>
</html>
依赖注入：
好处是，函数的参数的名字是定死的，比如$scope, $rootScope，而且参数只要名字对了，没有顺序规定
在自定义指令directive的时候，如果要用到restrict:M的时候，用的是注释<!-- directive:hello --> ，这里的hello是自定义的指令名称，而且目前的1.5.8版本里，还要在return的json里写上 replace:true;
app.directive('hello',function(){
return {
restrict:'ECMA',
template:'<div>Hello World</div>', //也可以用templateUrl
replace:true,
link:function(scope,ele,attr){
ele.bind('mouseenter',function(){
scope.$apply('printout()'); //调用的是对应的controller里的printout方法
});
}
};
});
同一个指令可以用在不同的controller里面，实现指令在不同controller下使用的的方法，就是在自定义标签里加上自定义属性，根据属性值的不同，调用controller下不同的方法
var app = angular.module('myApp',[]);
app.controller('start_no1',['$scope',function($scope){
$scope.printout_1 = function(){
console.log('start');
};
}]);
//这里定义了2个不同的controller，都想用下面自定义的指令hello，它们有不同的函数printout_1和printout_2
app.controller('start_no2',['$scope',function($scope){
$scope.printout_2 = function(){
console.log('start222');
};
}]);
app.directive('hello',function(){ //指令就一个，但是里面绑定事件用到的函数写在$apply()的参数里，而这时,attr就是指的该标签attr的自定义属性名，以为着，调用的时候执行该标签里的属性，这个例子里自定义的是hi属性
return {
restrict:'ECMA',
template:'<div>Hello World</div>',
replace:true,
link:function(scope,ele,attr){
ele.bind('mouseenter',function(){
scope.$apply(attr.howtoload); //这里的函数调用只要写函数名，因为前面的$apply已经是执行了，另外这个howtoload都要小写，即使在标签里是驼峰式的写法howToLoad，为了避免失误，可以在标签都保持小写即可
});
}
};
});
</script>
</head>
<body >
<div ng-controller="start_no1">
<hello howToLoad="printout_1()"></hello> <!--这里在指令hello标签里写上自定义属性hi，然后指定它等于不同controller里的函数-->
</div>
<div ng-controller="start_no2">
<hello howToLoad="printout_2()"></hello>
</div>
【学】AngularJS日记（2）的更多相关文章
- 【pwn】学pwn日记——栈学习（持续更新）
[pwn]学pwn日记--栈学习(持续更新) 前言 从8.2开始系统性学习pwn,在此之前,学习了部分汇编指令以及32位c语言程序的堆栈图及函数调用. 学习视频链接:XMCVE 2020 CTF Pw ...
- 【pwn】学pwn日记（堆结构学习）
[pwn]学pwn日记(堆结构学习) 1.什么是堆? 堆是下图中绿色的部分,而它上面的橙色部分则是堆管理器 我们都知道栈的从高内存向低内存扩展的,而堆是相反的,它是由低内存向高内存扩展的 堆管理器的作 ...
- 【学】AngularJS日记（4）- 过滤器的使用
过滤器: 过滤器中的 |json,可以使原来的json数据输出时按照换行的样式 过滤器 | limitTo:2可以截取字符串或者数组的前2位 过滤器| orderBy 可以进行排序,加入json里的k ...
- 【学】AngularJS日记（3）- $apply(), run()方法
$scope.$apply()方法可以强制$apply()里运行的函数所改变的model里的数据直接反应到view里,因为在angular的环境中,有时会用到原生js或者jquery的时候,这些行为有 ...
- 【学】AngularJS日记（1） - 常用工具
angular.isArray(a) 判断a是否为数组 angular.isDate 是否为时间对象 angular.isDefined 判断元素是否存在 angular.isUndefined an ...
- 跟我学AngularJs:Service、Factory、Provider依赖注入使用与差别
林炳文Evankaka原创作品. 转载请注明出处http://blog.csdn.net/evankaka 本教程使用AngularJs版本号:1.5.3 AngularJ ...
- 写在学AngularJS之前
近来从不同途径听说AngularJS和MEAN stack,感觉很有趣的样子,于是准备抽时间来学习一下.在这里记录学习过程中的笔记. 简单整理一下先: 1. 我的学习资料: a) 官网 b) wiki ...
- 从0开始学angularjs－笔记03
大家好,今天上班第一天,可能大家都不是很想上班吧,我也是一样啦---不想上班就来继续写我的angualrjs教程,造福大家吧!! 今天的主要讲解部分有以下几点:1.演示一个完整的项目结构 2.$sc ...
- 从0开始学angularjs－笔记02
上一节课主要跟大家讲解了angularjs的几种特性和看了一个简单的双向绑定的例子.最近都没有时间写博客了....忙成狗呀...今天周末,在写一篇吧~~ 今天主要跟大家详细讲解一下angularjs的 ...
随机推荐
- Unity使用protobuf-net进行二进制序列化与反序列化
Protobuf-net提供的一种易于使用的数据序列化方案,可序列化带有[ProtoContract]特性的类实例,并可支持Unity各个发布平台,且效率高.易用性强. public static c ...
- 库函数API和C语言汇编语言混合式编程
C语言代码内嵌汇编的方法: 在C语言文件中以如下格式加入汇编代码 __asm__( “汇编语句模板” :输出部分 :输入部分 :“破坏描述部分” ) asm可以由__asm__代替,为其别名. 可加上 ...
- 基于IE内核的浏览器：WebBrowser上的网页与Winform本身交互[Demo下载]
http://blog.udnz.com/Article/Invoke_Javascript_On_Webbrowser_In_Winform.aspx C# 中调用 网页上的 Javascript ...
- runtime 初入
一.runtime简介 RunTime简称运行时.OC就是运行时机制,也就是在运行时候的一些机制,其中最主要的是消息机制. 对于C语言,函数的调用在编译的时候会决定调用哪个函数. 对于OC的函数,属于 ...
- java文件编译及运行
1 配置环境变量 使用鼠标右击“我的电脑”->属性->高级->环境变量 系统变量->新建->变量名:JAVA_HOME 变量值:C:\Program Files (x86 ...
- SILVERLIGHT 应急卫生模拟演练项目之GRID布局
上篇文章 我介绍了LOADING界面 loading加载完成后 会进入主界面 效果图如下 这里我要给大家说一下我在布局方面的应用 说起布局 做过SL开发的一定都知道 Grid,StackPanel和 ...
- python、matlab、c++的括号增加次序，以及图片存储方式
1 增加次序: python:(同c++多维数组) np.zeros([2,3,4]),先是按照内存空间均分为2份,每份又均分3份,最终再细分4份 2最大份,先按左分 例子:re ...
- Day24_多线程第一天
1.线程 1.概述 宏观来讲 进程:就是正在运行的程序 线程:就是进程的执行路径,执行单元 2.创建并启动线程的两种方式(掌握) 1.定义一个类继承Thread ...
- 【Cocos2d-x 3.x】 调度器Scheduler类源码分析
非个人的全部理解,部分摘自cocos官网教程,感谢cocos官网. 在<CCScheduler.h>头文件中,定义了关于调度器的五个类:Timer,TimerTargetSelector, ...
- pptp 之 静态路由
上网的人总是离不开VPN,你们都懂得.以前总是买付费的VPN,慢的要死,还不便宜.于是就自己买了个国外VPS 搭建了个PPTP,超级简单.网上教程大把大把的. VPN是全局代理,上google啥的没毛 ...