• angular-控制器


     1 controller 控制器
     2 四、作用域:($rootScope)对整个页面相当于全局变量
     3 也就是只要是用$rootScope定的东西它一定是作用于全局,而其它的只是对它控制器所在的那一部分
     4 列如:
     5 <body ng-app="app">
     6 {{haha}} 这里是鸣人
     7 <div ng-controller="ctrl">
     8 {{name}} 小潘
     9 {{age}} 200
    10 {{haha}} 这里是鸣人
    11 </div>
    12 <div ng-controller="ctrl2">
    13 {{name}} 小西
    14 {{age}} 188
    15 {{haha}} 这里便是鸣人
    16 </div>
    17 <script>
    18 
    19 //定义 app模块
    20 angular.module('app',[])
    21 .controller('ctrl',function($scope,$rootScope){
    22 $
    23 
    24 scope.name="小潘!"
    25 $scope.age = 200;
    26 $rootScope.haha = '鸣人!';
    27 })
    28 //不同的写法,第二个参数是一个数组
    29 .controller('ctrl2',["$scope",function($scope){
    30 $
    31 
    32 scope.name = '小西';
    33 $scope.age = 188;
    34 }])
    35 </script>
    36 </body>
    37 </html>
    38 五、$watch (观察看守的意思)
    39 <body ng-controller="ctrl">
    40 <h1>{{name}}</h1>
    41 <input ng-model="name"/>
    42 <script>
    43 angular.module('app',[])
    44 .controller('ctrl',function($scope,$timeout){
    45 $scope.name = "鸣人!"
    46 $scope.$watch(function(){ 
    47 console.log($
    48 scope.name)
    49 })
    50 setTimeout(function(){
    51 //手动触发angular的脏检查
    52 $scope.$apply(function(){ 请求传送
    53 $scope.name = '小樱!'
    54 })
    55 },2000) 2000是设置时间2秒后
    56 
    57 setTimeout(function(){
    58 console.log('-------------')
    59 $scope.name = '佐助!';
    60 },2000); 
    61 以上蓝色部分是不会修改其上name的因为js代码里面是没办法对其更改的
    62 $timeout(function () {
    63 $scope.name = "卡卡西";
    64 }, 4000);
    65 })
    66 </script>
    67 </body>
    68 第一次是鸣人
    69 2秒后便是小樱
    70 4秒后变为卡卡西
    71 六、过滤器:
    72 lowercase 格式化字符串为小写
    73 uppercase 格式化字符串为大写
    74 用法:注意中间管道符 |
    75 <div ng-app="myApp" ng-controller="personCtrl">
    76 <p>姓名为 {{ name | lowercase }}</p> 姓名为eee(转换为了小写)
    77 </div>
    78 angular.module('app',[])
    79 .controller('myApp',function($scope,$timeout){
    80 $scope.name = "EEE"
    81 })
    82 currency 过滤器(将数字格式化为货币格式)
    83 <div ng-app="myApp" ng-controller="personCtrl">
    84 <p>姓名为 {{ name | lowercase }}</p> 姓名为$123,456.00(转换为了小写)
    85 </div>
    86 angular.module('app',[])
    87 .controller('myApp',function($scope,$timeout){
    88 $scope.name = "123456" 数字
    89 })
    90 
    91 2、date 格式化
    92 {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25
    93 3、number 格式化(保留小数)
    94 {{149016.1945000 | number:2}}
  • 相关阅读:
    结队项目----第一次作业
    小学四则运算(2.0版本)
    小学算法(四则运算)
    (读书笔记)基于CMMI的软件工程及实训指导------第一章软件工程基础
    数学建模------线性规划
    初出茅庐-----微信好友分析与微信机器人
    初出茅庐----数据库的学习应用
    初出茅庐---程序测试与爬虫
    初出茅庐----体育竞技分析
    Unity使用小剧场—创建的按钮On Click()只有MonoScript怎么办
  • 原文地址:https://www.cnblogs.com/liujinhua/p/8525053.html
Copyright © 2020-2023  润新知