angular-控制器
controller 控制器
四、作用域：（$rootScope）对整个页面相当于全局变量
也就是只要是用$rootScope定的东西它一定是作用于全局，而其它的只是对它控制器所在的那一部分
列如：
<body ng-app="app">
{{haha}} 这里是鸣人
<div ng-controller="ctrl">
{{name}} 小潘
{{age}} 200
{{haha}} 这里是鸣人
</div>
<div ng-controller="ctrl2">
{{name}} 小西
{{age}} 188
{{haha}} 这里便是鸣人
</div>
<script> //定义 app模块
angular.module('app',[])
.controller('ctrl',function($scope,$rootScope){
$ scope.name="小潘！"
$scope.age = 200;
$rootScope.haha = '鸣人！';
})
//不同的写法，第二个参数是一个数组
.controller('ctrl2',["$scope",function($scope){
$ scope.name = '小西';
$scope.age = 188;
}])
</script>
</body>
</html>
五、$watch （观察看守的意思）
<body ng-controller="ctrl">
<h1>{{name}}</h1>
<input ng-model="name"/>
<script>
angular.module('app',[])
.controller('ctrl',function($scope,$timeout){
$scope.name = "鸣人！"
$scope.$watch(function(){
console.log($
scope.name)
})
setTimeout(function(){
//手动触发angular的脏检查
$scope.$apply(function(){ 请求传送
$scope.name = '小樱！'
})
},2000) 2000是设置时间2秒后 setTimeout(function(){
console.log('-------------')
$scope.name = '佐助！';
},2000);
以上蓝色部分是不会修改其上name的因为js代码里面是没办法对其更改的
$timeout(function () {
$scope.name = "卡卡西";
}, 4000);
})
</script>
</body>
第一次是鸣人
2秒后便是小樱
4秒后变为卡卡西
六、过滤器：
lowercase 格式化字符串为小写
uppercase 格式化字符串为大写
用法：注意中间管道符 |
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ name | lowercase }}</p> 姓名为eee(转换为了小写)
</div>
angular.module('app',[])
.controller('myApp',function($scope,$timeout){
$scope.name = "EEE"
})
currency 过滤器（将数字格式化为货币格式）
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ name | lowercase }}</p> 姓名为$123,456.00(转换为了小写)
</div>
angular.module('app',[])
.controller('myApp',function($scope,$timeout){
$scope.name = "123456" 数字
}) 2、date 格式化
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25
3、number 格式化（保留小数）
{{149016.1945000 | number:2}}
angular-控制器的更多相关文章
- angular控制器常用的4种通信方式
首先概括一下angular控制器通信的4种方式: 作用域继承. 通过$scope广播事件. 事件发射器模块. 服务. 1.作用域的继承 子作用域可以访问声明在它们的祖先作用域中的变量和函数. < ...
- angular 控制器之间的通信
1, 利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会 影响到子作用域,反之,修改子作用域只会影响子作用域 ...
- Angular控制器
这里使用的是angular-1.0.1.min.js Angular的前端渲染 <div> <ul> <li ng-repeat="i in [1,2,3]&q ...
- 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}}却可以正常 ...
随机推荐
- Exp5 MSF基础应用 20165110
Exp5 MSF基础应用 20165110 一.实践要求(3.5分) 实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 1.一个主动攻击实践;(1分) m ...
- Python学习笔记5程序的控制结构
1.分支结构 (1)单分支结构 (2)二分支结构 (3)多分支结构 条件判断 (4)程序的异常处理 2.实例:身体质量指数BMI 思路一(国内,稍作修改就是国际): 思路二: height,weigh ...
- 开发模型之V模型
1.模型目的: V模型的目的在于改进软件开发的效率和效果. 2.常见理论性描述: V模型从整体上看起来,就是一个V字型的结构,由左右两边组成. 左边的下划线分别代表了需求分析.概要设计.详细设计.编 ...
- select 两层 第二个select需要加别名
select t.id from (select xxx) t
- webuploader在ie9以下失效原因
在项目中为了兼容ie9,使用webuploader插件,发现在部分电脑的ie9模式下点击无响应,排查原因,最终发现是不是插件有问题,而是ie浏览器没有flash的加载项,最终下载flash,并安装运行 ...
- 使用串口安装centos操作系统
https://linuxconfig.org/how-to-force-text-mode-installation-of-redhat-linux https://www.centos.org/f ...
- my new blog
博客迁移至: https://www.dboop.com/
- hdfs数据采集场景示意图
- 使用nginx反向代理实现隐藏端口号
使用nginx反向代理实现隐藏端口号 在服务器上下载安装nginx,主要是修改配置nginx.conf. 用proxy_pass里面配置要转发的域名+端口,相当于这一部分是被域名替换的部分,在http ...
- 返回上一页 html A标记代码
<a class="sjad" href="#" onClick="javascript:history.back(-1);"> ...