Angular指令渗透式理解

来源：互联网发布：飞机部件修理就业数据编辑：程序博客网时间：2024/04/30 03:14

通过一段时间对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>www.dawen.org</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);  //通过取最小值，来保证,货物数量最大不能超过629                 },30                 reduce: function(){31                    $scope.goods.data.num = Math.max(--$scope.goods.data.num, 0);  //通过取最大值，来保证,货物数量最小不为032                 }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'}];...

文章来自：http://www.cnblogs.com/zhangyunlin/

追加方法，会在原有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表示元素名称（大区...）                        })

0 0