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-控制器的更多相关文章

  1. angular控制器常用的4种通信方式

    首先概括一下angular控制器通信的4种方式: 作用域继承. 通过$scope广播事件. 事件发射器模块. 服务. 1.作用域的继承 子作用域可以访问声明在它们的祖先作用域中的变量和函数. < ...

  2. angular 控制器之间的通信

    1, 利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会 影响到子作用域,反之,修改子作用域只会影响子作用域 ...

  3. Angular控制器

    这里使用的是angular-1.0.1.min.js Angular的前端渲染 <div> <ul> <li ng-repeat="i in [1,2,3]&q ...

  4. angular控制器之间的传值

    每个controller都会有自己的scope,所有的scope都是属于 $rootScope的子或者子的子... 那么问题就好解决了,通过 $rootScope.$broadcast 广播的事件每个 ...

  5. angular控制器、服务和指令三者之间的关系

    从总体来看,这三个组件的关系如下所示: 服务负责从远端服务器抓取和存储数据. 基于服务构建的控制器将为angular的作用域层次提供数据和功能. 基于服务和控制器构建的指令将直接与文档对象模型(DOM ...

  6. angular控制器的执行顺序和服务的注入情况

    这篇文章到底要讲什么呢? 这必须要从栗子开始讲起... 看下面这两段代码: demo1: http://jsfiddle.net/ujzmvp3j/1/ demo2: http://jsfiddle. ...

  7. 简话Angular 02 Angular控制器-作用域嵌套

    一句话: 就是孩子可以啃老,老子不能动孩子一根毛! * 子控制器有父控制器里变量的所有权限,可以读取,也可以修改. * 父控制器不能读,也不能修改孩子的变量 1. html代码 <div ng- ...

  8. angular 控制器的使用两种模式

    angular.module("myApp",[]) .controller("firstCtrl",["$scope",function( ...

  9. angular 控制器之间值得传递

    <div ng-controller="ParentCtrl"> <!--父级--> <div ng-controller="SelfCtr ...

  10. angular控制器controller里获取不到ng-model的值，获取为undefined

    所遇问题: html:ng-model=“test”, 但是在controller里打印的$scope属性里面并未发现test,控制台打印test为undefined,页面上{{test}}却可以正常 ...

随机推荐

  1. laravel 模型操作

    1. 简介 2. 创建模型 //模型文件默认创建在app目录下,也可以指定创建在某个文件夹下,如Model/Goods 1. php artisan make:model Goods 2. 这种方式会 ...

  2. spring-framework源码编译及导入

    环境说明: 时间:2017-09-26 OS name: "mac os x", version: "10.12.4", arch: "x86_64& ...

  3. 阿里巴巴开源 Spring Cloud Alibaba，加码微服务生态建设

    本周,Spring Cloud联合创始人Spencer Gibb在Spring官网的博客页面宣布:阿里巴巴开源 Spring Cloud Alibaba,并发布了首个预览版本.随后,Spring Cl ...

  4. eclipse中启动服务时提示端口被占的2种解决方案

    出现类似这样的:port '19001' at localhost are already in use 第一种:在任务管理器中关闭相关eclipse进程,然后重启eclipse.这种方法可能有时候会 ...

  5. Centos7 出现Welcome to emergency mode!

    做mount挂载时,修改了  /etc/fstab 文件,导致Centos7重启时出现如下图所示错误: Welcome to emergency mode! After logging in, typ ...

  6. c#devexpress 窗体控件dock的重要

    在设计c# devexpress winform 窗体时, 要建立起dock意识, dock就是子窗体如何靠在父窗体上, 有fill 全覆盖, buttom 底部,top 上部... 如下图 pane ...

  7. MySQL数据库开发常见问题及几点优化！

    从一下三个方面考虑: 库表设计 慢 SQL 问题 误操作.程序 bug 时怎么办 一.库表设计 1.1.引擎选择 在 MySQL5.1 中,引入了新的插件式存储引擎体系结构,允许将存储引擎加载到正在运 ...

  8. Python 的 14 张思维导图汇总

    本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库,后续会发布相应专题的文章). 首先,按顺序依次展示了以下内容的一系列思维导图:基础知识,数据类型(数字,字符串,列表,元组,字典 ...

  9. odoo8 元素简介

    一:模型module: 1. 字段类型 (1)可控字段: fileds.char() fileds.Boolean() fileds.Date() (2)保留字段:(系统自动生成) id (Id) t ...

  10. abp 设置默认语言为中文

    abp 设置默认语言为中文 abp的默认语言设置,存放于数据库表AbpSettings中,这样配置可使默认语言为中文: name: Abp.Localization.DefaultLanguageNa ...