Angular控制器
这里使用的是angular-1.0.1.min.js
Angular的前端渲染
<div>
<ul>
<li ng-repeat="i in [1,2,3]">
<h1>{{i}}</h1>
</li>
</ul>
</div>
效果:
使用控制器读取JSON:
<div ng-controller="PhoneListCtrl">
<ul>
<li ng-repeat="phone in phones">
<h1>{{phone.name}}</h1>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
控制器代码:
function PhoneListCtrl($scope) {
$scope.phones = [{
"name" : "Nexus S",
"snippet" : "Fast just got faster with Nexus S."
}, {
"name" : "Motorola XOOM with Wi-Fi",
"snippet" : "The Next, Next Generation tablet."
}, {
"name" : "MOTOROLA XOOM",
"snippet" : "The Next, Next Generation tablet."
}
];
}
效果:
你也可以自己定义一个控制器:
<div ng-controller="mycontroller">
<p>{{ article.ID }}</p>
<p>{{ article.Name }}</p>
<button ng-click="func()">测试</button>
</div>
控制器实现:
function mycontroller($scope) {
$scope.article = {
ID : 1,
Name : "hell world"
};
$scope.func = function () {
alert(1);
}
}
效果:
Angular控制器的更多相关文章
- angular控制器常用的4种通信方式
首先概括一下angular控制器通信的4种方式: 作用域继承. 通过$scope广播事件. 事件发射器模块. 服务. 1.作用域的继承 子作用域可以访问声明在它们的祖先作用域中的变量和函数. < ...
- angular 控制器之间的通信
1, 利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会 影响到子作用域,反之,修改子作用域只会影响子作用域 ...
- angular控制器之间的传值
每个controller都会有自己的scope,所有的scope都是属于 $rootScope的子或者子的子... 那么问题就好解决了,通过 $rootScope.$broadcast 广播的事件每个 ...
- angular控制器、服务和指令三者之间的关系
从总体来看,这三个组件的关系如下所示: 服务负责从远端服务器抓取和存储数据. 基于服务构建的控制器将为angular的作用域层次提供数据和功能. 基于服务和控制器构建的指令将直接与文档对象模型(DOM ...
- angular控制器的执行顺序和服务的注入情况
这篇文章到底要讲什么呢? 这必须要从栗子开始讲起... 看下面这两段代码: demo1: http://jsfiddle.net/ujzmvp3j/1/ demo2: http://jsfiddle. ...
- 简话Angular 02 Angular控制器-作用域嵌套
一句话: 就是孩子可以啃老,老子不能动孩子一根毛! * 子控制器有父控制器里变量的所有权限,可以读取,也可以修改. * 父控制器不能读,也不能修改孩子的变量 1. html代码 <div ng- ...
- angular 控制器的使用两种模式
angular.module("myApp",[]) .controller("firstCtrl",["$scope",function( ...
- angular 控制器之间值得传递
<div ng-controller="ParentCtrl"> <!--父级--> <div ng-controller="SelfCtr ...
- angular控制器controller里获取不到ng-model的值,获取为undefined
所遇问题: html:ng-model=“test”, 但是在controller里打印的$scope属性里面并未发现test,控制台打印test为undefined,页面上{{test}}却可以正常 ...
随机推荐
- iOS 日期时间控件
UIDatePicker *picker = [[UIDatePicker alloc]initWithFrame:CGRectMake(0, 0,[UIParam widthScreen] ,50 ...
- 使用IDA静态分析解密《舰娘Collection》的lua脚本
好久没写东西了,换工作之后忙得一比.你说创业?风太大没听清啊看了看以前写的东西,觉得以前写得太严肃了,从现在开始要轻松一点,要做一名逗逼码农. 本文不会介绍破解的细节,最终完成破解所编写的代码也不会公 ...
- Scrum
Scrum[编辑] 维基百科,自由的百科全书 Scrum是一种敏捷软件开发的方法学,用于迭代式增量软件开发过程.Scrum在英语是橄榄球运动中争球的意思. 虽然Scrum是为管理软件开发项目而开发 ...
- Eclipse指定JDK版本 Failed to load the JNI shared JVM.dll
Eclipse指定JDK版本 Failed to load the JNI shared JVM.dll 打开eclipse.ini添加 -vm C:/Java/jdk1.6.0_02/bin 参考: ...
- 给Pomelo的聊天室添加time的RPC调用
为了练手,给聊天应用增加一个rpc调用和一个time类型的服务器,在servers/time/remote/timeRemote.js中,添加如下代码: module.exports.getCurre ...
- 故障排查实战案例——某电器ERP系统日志暴增
前言 本篇文章写在新春佳节前夕,也是给IT运维朋友一个警醒,在春节长假前请妥善体检自己的系统安心过个年. 千里之堤毁于蚁穴,一条看似简单的语句就能拖垮整个系统,您的SQL Server很久没体检了吧? ...
- TypeScript教程3
1.快速回顾一下这JavaScript中的命名函数和匿名函数: 纯文本查看 复制代码 1 2 3 4 5 //Named functionfunction add(x, y) { return ...
- Fourier分析基础(二)——由级数导出连续Fourier变换
此处推导参考(照抄) A First Course in Wavelets with Fourier Analysis Second Edition, Albert Boggess& Fran ...
- Ubuntu 制作U盘启动盘
部门需要一台Linux系统远程共享服务器,需要一个启动盘安装.但是由于公司windows 系统都安装了保安软件,而且软件的使用也是有限制的.所以不能使用UltraISO 这类软件制作U盘启动盘.还好部 ...
- 【java设计模式】之 建造者(Builder)模式
我们还是举上一节的例子:生产汽车.上一节我们通过模板方法模式控制汽车跑起来的动作,那么需求是无止境的,现在如果老板又增加了额外的需求:汽车启动.停止.鸣笛引擎声都由客户自己控制,他想要什么顺序就什么顺 ...