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}}却可以正常 ...
随机推荐
- Grunt构建工具插件篇——之less工具3和watch配合自动化编译
grunt less转换成css速度慢 而且页面会全部刷新? 最近遇到了个问题,grunt里用less,当修改完.less里面的样式,对应 的.css文件会好几秒才修改,然后浏览器上显示也会耗时好几秒 ...
- Linux服务器开发/测试环境搭建-流程
1.MariaDB yum 安装/初始化/授远程权限 yum安装 在MariaDB官网根据Linux系统查找您所需要的db版本:https://downloads.mariadb.org/mariad ...
- BUG--tomcat更改目录失败
1.问题描述 按照通用的做法,tomcat可以配置运行的网站目录.但是配置后不能正确运行. 配置过程如:http://www.cnblogs.com/SimonGao/p/4905887.html 2 ...
- pace.js原理简介
简介: 不少童鞋可能都使用过pace.js:http://github.hubspot.com/pace/docs/welcome/ 只要在页面上引入pace.js和相关的css,并不需要对业务逻辑做 ...
- 一个简单版的波纹css3动画
ul{width: 300px;border: red;}ul li{width: 300px;height: 70px;line-height: 70px;background: #fff;text ...
- Java线程: 线程调度
线程调度是Java多线程的核心,只有好的调度,才能充分发挥系统的性能,提高程序的执行效率. 一.休眠 休眠的目的是使线程让出CPU的最简单做法,线程休眠的时候,会将CPU交给其他线程,以便轮换执行,休 ...
- Drawerlayou与ScrollView的介绍
Drawerlayout侧滑 Drawerlayout是Support Library包中实现了侧滑菜单效果的控件. 滚动条(ScrollView) ScrollView和HorizontalScro ...
- tomcat服务器搭建之ngrok——将内网地址映射到外网
最近心血来潮,想学习微信公众号开发.但是自己又没有外网服务器,这个给我带来很大的麻烦. 刚开始申请了新浪云服务和百度云服务,将写好的代码打包丢到相应的云服务器上就行. 但问题就来了,开发中避免不了错误 ...
- JavaScript Window.document对象
一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunment.getElementById(&qu ...
- java_JDBC字段对应
地址: http://otndnld.oracle.co.jp/document/products/oracle10g/102/doc_cd/java.102/B19275-03/datacc.htm ...