Angular指令渗透式理解

通过一段时间对angular指令的使用，理解了angular指令的意义，下面逐一介绍一下。

ng-app：定义一个angualr模块，表示angular作用的范围，如下代码：

ng-app在html标签上使用时，表示angular作用于整个html页面，而在body上使用时表示作用于整个body

 1 <!DOCTYPE html>
 2 <html lang="en" ng-app="app"> <!-- 定义在html中的 ng-app -->
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8 <script src="angular.js"></script>
 9 </body>
10 </html>
11 
12 <!DOCTYPE html>
13 <html lang="en">
14 <head>
15     <meta charset="UTF-8">
16     <title>test</title>
17 </head>
18 <body ng-app="app">      <!-- 定义在body中的 ng-app -->
19 <script src="angular.js"></script>
20 </body>
21 </html>

ng-controller: 定义angular控制器，控制器是view与model之间数据传递的纽带

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body ng-app="app">
    <div ng-controller="myCtr">
    </div>
<script src="angular.js"></script>
</body>
</html>

数据绑定有三种格式：

表达式形式{{}}、ng-bind='XXX'、ng-model='XXX'

表达式{{}}多用于绑定的数据较多时使用,指令形式为后两种，ng-model用于表单数据绑定，指令绑定数据不会出现闪屏问题（网速慢时，出现{{}}问题）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body ng-app="app">
 8     <div ng-controller="myCtr">
 9         {{msg}}                  <!-- 表达式的形式 -->
10         <p ng-bind="msg"></p>    <!-- ng-bind指令的形式 -->
11         <input type="text" ng-model="msg"> <!-- ng-model指令形式，用于表单数据绑定 -->
12     </div>
13 <script src="angular.js"></script>
14 <script>
15       var app = angular.module('app', []);
16       app.controller('myCtr',['$scope', function($scope){
17      
18       }
19 </script>
20 </body>
21 </html>

为了解决上述表达式{{}}绑定数据时的闪屏问题，我们引入ng-cloak指令，其用法如下：

由于网速过慢，angular还未能很快加载进来，所以页面会出现{{}}，闪屏问题

class="ng-cloak":将控制器内容隐藏，用户便不会看到{{}}闪屏

等到angular.js加载进来后，会通过ng-cloak指令将隐藏的内容显示出来，提升了用户体验效果，也解决了表达式{{}}闪屏问题，可以放心大胆的去使用表达式了

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     .ng-cloak {
 7      display:none;   <!-- 默认将控制器中内容隐藏 -->
 8     }
 9 </head>
10 <body ng-app="app">
11     <div ng-controller="myCtr" ng-cloak class="ng-cloak"> <!-- 当我们刷新页面时,控制器内的内容是隐藏的,angular加载进来后通过ng-cloak指令将其内容显示出来 -->
12        {{}}
13     </div>
14 <script src="angular.js"></script>
15 <script>
16 var app = angular.module('app', []);
17 app.controller('myCtr',['$scope', function($scope){
18 
19 }
20 </script>
21 </body>
22 </html>

ng-value,用于表单中数据绑定的表达式（计算等），由此看来指令就像游戏中的装备，在什么样的情况下要使用什么样的指令（装备），这样才能标签语义化

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7     .ng-cloak {
 8      display:none;
 9     }
10     </style>
11 </head>
12 <body ng-app="app">
13     <div ng-controller="myCtr" ng-cloak class="ng-cloak">
14         <form>
15             <input type="text" name="title" ng-model="goods.data.name">
16             <input type="text" name="price" ng-model="goods.data.price">
17             <input type="text" name="num" ng-model="goods.data.num">    
18             <input type="text" name="allPrice" ng-value="goods.data.price*goods.data.num" ng-readonly="true" >
19             <input type="submit">
20         </form>
21     </div>
22     <script src="angular.js"></script>
23     <script>
24         var app = angular.module('app', []);
25         app.controller('myCtr',['$scope', function($scope){
26             $scope.goods = {           27                 data:{'name':'apple', 'price':300, 'num':0}
28                }
29         }]);
30     </script>
31 </body>
32 </html>

下面实现一个购物车功能，点击按钮增加货物数量，并增加总价，相反也可点击按钮减少货物数量，减少总价

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7     .ng-cloak {
 8      display:none;
 9     }
10     </style>
11 </head>
12 <body ng-app="app">
13     <div ng-controller="myCtr" ng-cloak class="ng-cloak">
14         <p>商品名称：{{goods.data.name}}</p>
15         <p>商品价格：{{goods.data.price}}</p>
16         <p>商品数量：{{goods.data.num}}</p>
17         <p>商品总价：{{goods.data.price*goods.data.num}}</p>
18         <p ng-bind="goods.data.price"></p>
19         <button ng-click="goods.add()">add</button>   //增加货物数量按钮
20         <button ng-click="goods.reduce()">reduce</button> //减少货物数量按钮
21     </div>
22     <script src="angular.js"></script>
23     <script>
24         var app = angular.module('app', []);
25         app.controller('myCtr',['$scope', function($scope){                          
               $scope.goods = {
26                data:{'name':'apple', 'price':300, 'num':0},
27                add : function(){
28                    $scope.goods.data.num = Math.min(++$scope.goods.data.num, 6);  //通过取最小值，来保证,货物数量最大不能超过6
29                 },
30                 reduce: function(){
31                    $scope.goods.data.num = Math.max(--$scope.goods.data.num, 0);  //通过取最大值，来保证,货物数量最小不为0
32                 }
33             }
34         }]);
35     </script>
36 </body>
37 </html>

Math.min(++$scope.goods.data.num, 6); 货物数量自加，然后与6比较取最小值，这样即可保证货物数量最大为6

Math.max(--$scope.goods.data.num, 0); 货物数量自减，然后与0比较取最大值，这样即可保证货物数量最小为0

在上述代码中加入下面代码片段，当我们点击关闭网站后status=0,status==0返回true，即ng-show="true",所以显示“网站正在维护”。

相反不显示，默认状态下，$scope.status = 1;也不会显示提示语。

<input type="radio" ng-model="status" ng-value="1">开启网站
<input type="radio" ng-model="status" ng-value="0">关闭网站
<div ng-show="status==0">
   <textarea>网站正在维护</textarea>
</div>
......
$scope.status = 1;
......

复选框使用，注意要加 ng-true-value;ng-false-value;表示复选框被选中时其ng-model的值为1（0），言外之意就是其值想为什么就为什么，我们控制

<input type="checkbox" ng-model="kl.name1" ng-true-value="1" ng-false-value="0">游戏
<input type="checkbox" ng-model="kl.name2" ng-true-value="1" ng-false-value="0">电影
<div ng-show="kl.name1==1">游戏</div>
<div ng-show="kl.name2==1">电影</div>

.......
$scope.kl = {"name1":"电影","name2":"游戏"};
.......

下拉框使用，其原理是通过 v.value as v.name for v in data 遍历数组，然后将其渲染成option标签, ng-model的值即为select的值（哪个option被选中值就是对应的

option标签的值）

<select ng-options="v.value as v.name for v in data" ng-model="city">
   <option value=''>请选择城市</option> <!-- 默认显示,记得加value='' -->
</select>

...
$scope.data = [{name:'北京',value:'01'},{name:'广东', value:'02'}];
...

追加方法，会在原有obj后面添加后面的obj,注意属性名不能一样，不然会覆盖（红色标注）

...
{{scales}}   <!-- view中显示出来，方便查看其结果 -->
...

$scope.scales = {'name':'lol', 'value':'德玛西亚'};
angular.extend($scope.scales, {'web':'dota','url':'moba'});

遍历方法，forEach(),可以遍历数组，亦可遍历对象，回调中的参数 v表是被便利的元素，k表示索引（下标）

...
{{lol}}  <!-- view中查看结果 -->
...
$scope.lol = [{'大区':'艾欧尼亚','hero':'剑姬'},{'大区':'守望之海', 'hero':'熔岩巨兽'}];
            angular.forEach($scope.lol,function (v, k) {
                console.log(v);            //控制台输出v, 查看后发现 v 表示被遍历数组中的元素
                v.hero = '德玛西亚'+v.hero; //添加前缀
            })

dota = {'大区':'艾欧尼亚','hero':'剑姬'};
        angular.forEach(dota, function(v, k){
            console.log(v); //v表示元素值（艾欧尼亚..）, k表示元素名称（大区...）                
        })

ng-model-options

...
<input type="text" ng-model="msg" ng-model-options="{updateOn: 'default blur', debounce:{default:2000, blur:0}}">{{msg}}
...

angular.module("app", [])
    .controller("myCtr", function($scope){
        
    })

上述代码中，后面表达式显示内容是依据前面用户输入的内容现实的

updateOn 设置input事件，根据事件触发后面表达式的显示

debounce 设置时间（毫秒），根据时间设置后面表达式的显示

ng-class

...
.gray {
 background-color: gray;
}
...
<p  ng-class="{gray:true}"></p>
<p  ng-class-odd="{gray:true}"></p>
<p  ng-class-even="{gray:true}"></p>

ng-style

<p  ng-style="{color:gray}"></p>

ng-click, ng-dblclick, ng-keydown, ng-keyup, ng-mousedown, ng-mouseup, ng-mouseenter, ng-mouseleave, ng-mousemove, ng-focus, ng-blur

posted @ 2016-12-21 12:10 孙凯亮阅读(264) 评论(0) 编辑收藏举报

刷新页面返回顶部

异乡小龟

一个前端

Angular指令渗透式理解

ng-model-options

ng-class

ng-style

公告